组件v-for循环中的重复键

Question

v-for duplicate keys issue

这会很好地返回一个列表，但是当我在数组中修改用户时，比如user.role =＆＃39;某些东西＆＃39;，它说我有重复的键。密钥是使用user.id设置的，这是他们的firebase密钥，因此不可能复制？结果是修改后的用户接管了列表中的其他用户，因此它显示了两次（我没有尝试过两个以上的用户），但如果我回去再重新访问此列表，它随着更新的数据显示出预期效果。

V-for循环：

<ManageUsersListItem
  v-for="user in sortedUsers"
  :key="user.id"
  :user="user"
  @removeManager="removeManager(user)"
  @makeManager="makeManager(user)"
  @removeUser="removeUser(user)"
/>

数据：

data() {
  return {
    users: [],
  }
},
firestore() {
  return {
    users: db.collection('brands').doc(this.brand.id).collection("users")
  }
},

对数组进行排序：

computed: {
  sortedUsers() {
    return this.users.sort(function(a,b) {
      var c = new Date(a.userAddedOn)
      var d = new Date(b.userAddedOn)
      return c-d
    })
  }
},

我用来更改用户角色的方法：

methods: {
  makeManager(user) {
     this.$firestore.users.doc(user.id).update({
        role: 'admin'
     })
  },
},

Answer 1

为避免重复的密钥使用索引而不是user.id

<ManageUsersListItem
 v-for="(user, index) in sortedUsers"
 :key="index"
 :user="user"
 @removeManager="removeManager(user)"
 @makeManager="makeManager(user)"
 @removeUser="removeUser(user)"
/>