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

Question

v-for 重复键问题

这会返回一个列表就好了，但是当我修改数组中的用户时，比如 user.role = 'something'，它说我有重复的键。密钥是用 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)"
/>