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>