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>