VueJS - Why is data in child component not being updated properly when used as data in another component?

Question

I am having an issue with my component data being updated. I have a component that is being used as a data object in another component's data field. The issue I am having is when I click on the submit button, the method should just take an input of firstname and lastname and update the child's search data field with it. However, it seems that while Vue is letting me push the data without errors, when I console.log afterwards I get an empty array. Can someone tell me what's going on that I am missing? Any help is much appreciated!

Here is the "child" component's (PatientSearch) code:

export default {
  data: () => ({
    search: [],
    selected: [],
    headers: [
      { text: 'Actions', value: '' },
      { text: 'Name', value: 'name' },
      { text: 'Status', value: 'status' },
    ],
    items: [],
  }),
  created() {
  //axios call that inserts retrieved data into items array
  }

Here is the "parent" components code where child component is being used:

export default {
  data: () => ({
    PatientSearch,
    ...
  }),
    methods: {
      submit: function() {

          let searchString = this.firstname + ' ' + this.lastname;

          console.log(searchString);
          
          PatientSearch.data().search.push(searchString);

          console.log('IN PARENT');
          console.log(PatientSearch.data().search);
      },

<template>
...
<app-layout title="Patient List" :children=PatientSearch>
</app-layout>
...
</template>

Parent passes data to children through props - vuejs.org/v2/guide/components.html#Organizing-Components I don’t get your idea with this data.push. And why is the child component in the data property? Why not in the components? — muka.gergely
I inherited the project in this way. The PatientSearch is in the data property so that the table in template can be easily populated with custom built directive (ie <app-layout...:children...></app-layout>. I have tried moving it to a components property like I was taught, but because of how it is initially coded it wont autopopulate the table. Instead of trying to rewrite the architecture, I would like to see if I can solve it this way. — JJDow
I see. Then this app seems to be anti-pattern. As I mentioned earlier and @Efrat has shown below the standard way of passing data from parent to child is through props. Or you can set up an event bus (or even better: a Vuex store) to manage states/data. — muka.gergely

Efrat Levitan Efrat Levitan · Accepted Answer · 2019-02-14T19:19:12

parent component should not access the child data.

you shuold pass your data from the parent to the child with props.

half of your work is done- you do that very well in the parent side- you pass it the title and the children, but you forgot to accept the props in the child side. its very simple- you just add the props object to the child:

export default {
  data: () => ({
    search: [],
    selected: [],
    headers: [
      { text: 'Actions', value: '' },
      { text: 'Name', value: 'name' },
      { text: 'Status', value: 'status' },
    ],
    items: [],
  }),
  props:{
     title:{
         type:string,
          default:''
     },
     children:{
         type:object,
         default:()=>{},
     }
},
  created() {
  //axios call that inserts retrieved data into items array
  }

the props are available inside the child via this.propName. to pass data from the child back to the parent, you can use a custom event. you can also use a global store in your app, to manage data and open access to it in every component.

VueJS - Why is data in child component not being updated properly when used as data in another component?

1 Answers