父状态更改后Vue组件不更新答案

【问题标题】：Vue component not updating after parent state change父状态更改后Vue组件不更新
【发布时间】：2017-03-26 14:41:51
【问题描述】：

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

【问题讨论】：

标签： vue.js

【解决方案1】：

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

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

【讨论】：

【解决方案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>
不自动将item注入组件的原因是因为这使得组件与v-for 的工作方式紧密相关。明确说明它的位置数据来源使组件在其他情况下可重用。

还有here：

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

...

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

【讨论】：