Vuejs prop update

Question

I have

Parent.vue:

<parent>
    <div v-for="item in data">
        <child :prop="item"></child>
    </div>
</parent>

Child.vue

<input v-model="prop.name">

Assume my data in Parent.vue has 4 elements. In parent component:

• Step1: I add the fifth element (the fake one)

• Step 2: I remove the fifth element (I call api to do so then call api again to reload data)

• Step 3: I add new element => In Child.vue, the prop has the removed element value in step 2, not the one I just add

I don't understand why in step 3, the prop changes to removed element value, not the one I just add in Parent.vue. I checked that when I removed the fifth element, Child.vue already run into destroyed.

Answer 1

You don't have your full code posted, but my best guess is that you're running into problems by not using a :key value, and so Vue is reusing component instances.

Try...

<parent>
  <div v-for="item in data">
    <child :prop="item" :key="item.idOrWhateverUniquePropertyYouveGot"></child>
  </div>
</parent>

For more reading, check out the Vue documentation for key (linked here).