antd vue 使用tag组件时,调用close会先后关闭2个标签

代码是这样的

<template v-for="(tag, index) in tags">
  <a-tag :key="index" :closable="true" @close="() => handleClose(tag)">
    {{ tag.classify_name }}
  </a-tag>
</template>
// 删除标签
handleClose (tag) {
  const tags = this.tags.filter(item => item.id !== tag.id)
  this.tags = tags
},

解决办法:tag组件的key不要使用索引,改成类似id这样的字段

使用索引导致删除了2次索引为 i 的值,看起来删除了2个标签
(当然就算使用索引也不应该删2次,是antd vue的锅)

修改后,问题解决

<template v-for="tag in tags">
  <a-tag :key="tag.id" :closable="true" @close="() => handleClose(tag)">
    {{ tag.classify_name }}
  </a-tag>
</template>

smile1213
207 声望17 粉丝

程序媛一枚