[Vue警告]:检测到重复的密钥:x。这可能会导致更新错误。如何防止添加已通过方法添加的项目

皮亚诺克

我有一个v-autocomplete,可循环显示用户列表。然后,我通过btn将它们添加到新列表中。如何通过比较dup键停止并提醒已经添加了用户?

<v-autocomplete
    v-model="event.user"
    :items="usersData"
    label="Seach speaker list"
    :search-input.sync="searchUser"
    return-object
    item-value="id"
    item-text="name"
></v-autocomplete>

我的addSpeaker方法是:

addSpeaker() {
    const newSpeaker = {
        id: this.event.user.uid,
        name: this.event.user.name,
    }
    this.speakers.push(newSpeaker)
    this.event.user = ''
},
removeSpeaker(id) {
    this.speakers = this.speakers.filter(speaker => speaker.id !== id)
}

我是否可以在此处进行检查,以防止已添加用户(如果已添加)?

埃文

您可以使用findIndex

addSpeaker() {
  const newSpeaker = {
    id: this.event.user.uid,
    name: this.event.user.name
  };
  const check = this.speakers.findIndex(x => x.name == this.event.user.name) === -1;
  check && this.speakers.push(newSpeaker);
  this.event.user = "";
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章