Vue.js道具更新

Question

我有

Parent.vue：

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

Child.vue

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

假设我在Parent.vue中的数据包含4个元素。在父组件中：

• 步骤1：我添加了第五个元素（假元素）

• 步骤2：我删除了第五个元素（先调用api，然后再次调用api来重新加载数据）

• 步骤3：我添加了新元素=>在Child.vue中，道具在步骤2中具有已删除的元素值，而不是我刚刚添加的元素值

我不明白为什么在步骤3中，道具会更改为已删除的元素值，而不是我刚刚在Parent.vue中添加的元素值。我检查了一下，删除第五个元素时，Child.vue已被销毁。

Answer 1

您没有发布完整的代码，但是我最好的猜测是，由于不使用:key值而遇到问题，因此Vue正在重用组件实例。

尝试...

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

有关更多信息，请查阅Vue文档中的密钥（linked here）。