Question

我有Vue组件，在使用v-for渲染子组件之后，从props接收json数据，并将此数据作为prop传递。一切正常，直到我尝试从此列表中删除一个项目，当我删除它时，它会错误地删除元素。在vue devtools中，我看到父级正确接收数据但未正确呈现。谁能帮我？这是我的代码：https://gist.github.com/giokaxo/3d291b9b7b8ef97f81dc83799c430302

Answer 1

使用v-for渲染元素时使用“key”属性，例如：

<p v-for="(product, index) in order.products" :key="i">..</p>

Answer 2

相关文档为here：

您可以在自定义组件上直接使用v-for，就像任何正常组件一样元素：
<my-component v-for="item in items" :key="item.id"></my-component>
在2.2.0+中，当v-for与组件一起使用时，现在需要key。


但是，这不会自动进行   将任何数据传递给组件，因为组件已隔离   他们自己的范围。为了将迭代的数据传递给   组件，我们也应该使用道具：
   <my-component
     v-for="(item, index) in items"
     v-bind:item="item"
     v-bind:index="index"  
     v-bind:key="item.id">
   </my-component>
不自动将项目注入组件的原因是因为它构成组件与v-for的工作方式紧密相关。明确它的位置数据来自于使组件在其他情况下可重用。

here：

当Vue更新使用v-for呈现的元素列表时，它依次为默认使用“就地补丁”策略。如果是数据的顺序项已更改，而不是移动DOM元素以匹配物品的顺序，Vue将简单地修补每个元素和确保它反映了应该在该特定情况下呈现的内容索引。

...

给Vue一个提示，以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要提供唯一键每个项目的属性。 key的理想值是唯一id 每个项目。

父状态更改后，Vue组件未更新

2 个答案: