[Vuejs]-How can I rerender parent component if child component changes

by

1👍

✅

You are on the right track but your not understanding the way Vue wants data handled.

What you are doing right

Your parent booklist component passes data to child component Book via the prop v-bind :book

What needs to happen Now

When something changes in Book it needs to do an emit event such as $emit('bookChanged', book) so that any parent components know that something happened in its child components and needs to react. So in my example your code would look like

<Book :book="bookElement" @bookChanged="RefreshMe_Method"  />

At this point the RefreshMe_Method could do one of several things, this easiet would be to simply update the data being passed to the Prop :book or another more brute force option is to call this.$forceUpdate(); but I am sure just updating the data will automatically refresh the data like you want.

How data is handled

  1. A Parent passes data to the child (think school lunch on first day).
  2. The Child displays Data, mutates data (local copy and not the Prop), or does something special. (Throwing away the vegetables)
  3. The child is so proud of this it wants to let everyone know so it $emits() a change.
  4. All parents see this and can do what they want from this point. (Ground the child and pack only Brocolli)
👤Scornwell

Leave a comment