Vuejs 道具更新

Posted 2023-02-23

【中文标题】Vuejs 道具更新

【英文标题】：Vuejs prop update

【发布时间】：2020-09-10 00:49:54

【问题描述】：

我有

父.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 已经被破坏了。

【问题讨论】：

分享您的完整示例？应该是<input v-model="prop.name">

@NikleshRaut 我的错误

【参考方案1】：

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

试试……

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

如需更多阅读，请查看 Vue 文档以获取密钥 (linked here)。