在循环底部创建新的 Vue 组件

Question

我有一个名为post-index 的组件，它显示所有帖子。在其中，我有另一个处理单个帖子的组件，即post-view。在其中，我有另一个处理好恶的组件。它被称为post-like。

一切正常，但如果我向现有数组添加新帖子（使用 .unshift()），一切都会出现问题。

例如：

它就像一个魅力。

当我创建一个新帖子时

看到了吗？即使用户不喜欢它，它也会突出显示喜欢的按钮。经过多次试验，我发现它从下面的帖子中复制了类似的值（真或假）。这意味着该组件不是为新帖子创建的，而是在底部创建的。这个问题有解决办法吗？

我在post-like 组件中拥有的只是一个名为like 的数据属性。它处理喜欢和不喜欢的动作。

如果我没记错的话，Vue 是从顶部重新渲染并在底部添加新组件。我该如何解决这个问题？

请询问您是否需要有关此问题的任何其他信息。

Answer 1

确保将:key 与v-for 一起使用，最好将帖子的ID 绑定到它，即：

<ul>
  <li v-for="(post, index) in posts" :key="post.id">
    <!-- post stuff here -->
  </li>
</ul>

请参阅此内容：https://vuejs.org/v2/guide/list.html#key