Javascript Vue v-用于在更新阵列时显示wierd行为

我的项目目前有一个注释列表，存储在一个名为

feedbackList

的数组中。 假设每个评论都包含一个作者和反馈字符串

所以，我的反馈列表是这样的

feedbackList: [
  {name: 'John', comment: 'a nice comment'},
  {name: 'Steve', comment: 'first comment'}
]

然后使用一些代码显示这些信息，例如：

<div class="comment-wrapper" v-for="(comment, index) in feedbackList" :key="index">
  <CommentCard
    v-bind:author="comment.author"
    v-bind:comment="comment.comment"
    v-on:DeleteComment="DeleteComment($event)"
  />
</div>

然而，问题是，当我把新的评论推到数组的边缘时，我的评论以一种奇怪的方式向下移动

现在，我将以我下面的人（作者）的身份出现，但有我自己的评论。 下面这篇文章将接过之前的一篇，与之前的作者一起发表自己的评论，等等

如果我使用

.push（newcomment）

它会按预期将新注释添加到底部。然而，接下来的问题是删除一条评论，使得前一条评论现在取代了最近删除的作者，而是他们自己的评论

---

我知道这有点让人困惑，但本质上，在更新我的数组时，v-for似乎没有正确地更新附加数据并给出正确的注释，而不是以前的作者。

这是因为您的索引绑定为

键。尝试添加一个
id
变量（对于每个注释都是唯一的，它可以是递增的数字或随机字符串），并将其用作
v-for
中的
键

例如：

反馈列表：[
{id:'nlgvn5d6'，name:'John'，comment:'a nice comment'}，
{id:'85m18efd'，name:'Steve'，comment:'first comment'}
]

请记住，在向列表中添加新项目时，它还需要有自己的唯一id

然后你可以这样使用它：

v-for=“反馈列表中的注释”：key=“comment.id”
我读到索引本身并不是定义
：key=”“
的最佳方法。我会创建一个自己的唯一键并将其添加到您的对象“它可以是递增的数字或随机字符串”>一个随机字符串作为ID，那么如果我们（意外地）生成相同的“随机”字符串呢？只需使用一个自动增量ID…哦，对了，是的，这完全有道理！因此，我不使用索引作为键，而是使用每个注释具有的唯一ID？而且，这将在v-for中传递，就像反馈列表中的v-for=“（comment，id）”：key=“id”@KJParker是的，没错。@0stone0我认为这取决于数据的类型和规模。有几种方法可以生成字符串ID，但实际上不可能生成重复的ID。（比如UUID）@KJParker我刚刚意识到你的评论有错误。您仍然将索引分配给键属性（只有在这种情况下，变量名为id而不是index）。我已经更新了关于如何使用id作为密钥的答案。
const newcomment = {
  author: this.author
  comment: this.feedback,
  timePosted: moment().format()
}
this.feedbackList.unshift(newcomment)