CODEWITHSUNDEEP
vue.jsvuejs2
melvin
melvin

Reputation: 2621

Vue data passed from parent to child not accessing

I have an app.vue file in which i have the parent codes.

<template>
  <div id="app" class="small-container">
    <h1>Employees</h1>
    <employee-form @add:employee="addNewEmployee" />
    <employee-table :employees="employees" />
  </div>
</template>

<script>
import EmployeeTable from '@/components/EmployeeTable.vue'
import EmployeeForm from '@/components/EmployeeForm.vue'

export default {
  name: 'app',
  components: {
    EmployeeTable,
    EmployeeForm,
  },
  data() {
    return {
      employees: [
        {
          id: 1,
          name: 'Richard Hendricks',
          email: '[email protected]',
        },
        {
          id: 2,
          name: 'Bertram Gilfoyle',
          email: '[email protected]',
        },
        {
          id: 3,
          name: 'Dinesh Chugtai',
          email: '[email protected]',
        },
      ],
      misc:'testbro',
    }
  },
  methods:{
    addNewEmployee: function( new_employee){
        var length = Object.keys(this.employees).length;
        length = length+1;
        this.employees.push({id:length,name:new_employee.name,email:new_employee.email});
    }
  }
}
</script>

I am passing two parameters in data() method to child EmployeeTable.

<template>
  <div id="employee-table">
    <table>
      <thead>
        <tr>
          <th>Employee name</th>
          <th>Employee email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="employee in employees" :key="employee.id">
          <td>{{ employee.name }}</td>
          <td>{{ employee.email }}</td>
        </tr>
      </tbody>
      <tfoot>
          <tr>
              <td>Misc Label</td>
              <td>{{misc}}</td>
          </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
    export default {
    name: 'employee-table',
    inheritAttrs: false,
        props: {
            employees: Array,
            misc: String,
        },
    }
</script>

The Employee name and email is displayed, but the misc {{misc}} is not displayed. Am i accessing the prop incorrectly ?

Upvotes: 0

Views: 68

Answers (2)

webnoob
webnoob

Reputation: 15934

You're not passing misc to the child component, you have: 

<employee-table :employees="employees" />

But you need:

<employee-table :employees="employees" :misc="misc" />

Upvotes: 3

ajobi
ajobi

Reputation: 3116

It is not that you are accessing the prop incorrectly, you are actually not passing the misc to the child component at all. You are only passing employees as a prop if you read carefully:

<employee-table :employees="employees" />

Correct code would look like this (in parent):

<employee-table :employees="employees" :misc="misc" />

Upvotes: 2

Related Questions