Vuejs 道具更新

Question

我有

父.vue：

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

Child.vue

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

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

• Step1：我添加第五个元素（假的）

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

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

我不明白为什么在第 3 步中，prop 更改为删除的元素值，而不是我刚刚在 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)。