antUI a-tag动态删除选项疑点？

Question

需求

使用ant的a-tag，做了一个多选项（非下拉多选框组件）即页面平铺展示。这个selectData数组是一个动态的，根据用户选择不同而不同。

疑点

当用户想删除某个选项时，如测试二（id:"456"）时，会把后面的测试三（id:"789"）也删除，但打印数组结果是正常的，显示却只有一个测试一（id:"123"）在页面上。

  
用户选择的数组
selectData:[
  {id:"123",name:"测试一"},
  {id:"456",name:"测试二"},
  {id:"789",name:"测试三"}
]
删除后打印的数组
selectData:[
  {id:"123",name:"测试一"},
  {id:"789",name:"测试三"}
]

使用的删除方法
tagClose(ele) {
  const arr = this.selectData
  const res = arr.filter((item) => item.id !== ele.id)
  this.selectData = res //问题就在这里过滤后进行赋值，为什么就会出现删除其后面的选项
},

后来试试重载方法就正常了，这是为什么啊？
tagClose(ele) {
  const arr = this.selectData
  const res = arr.filter((item) => item.id !== ele.id)
  this.loadPage()
  this.selectData = res
},

代码

<div class="selectInput" v-if="loadingCom">
        <a-tag closable @close="tagClose(item)" v-for="(item, index) in selectData" :key="index" style="maring-top: 3px"
          >{{ item.name }}
        </a-tag>
</div>

删除选项事件

tagClose(ele) {
  console.log('🚀 ~ tagClose ~ ele:', ele.id)
  const arr = this.selectData
  const res = arr.filter((item) => item.id !== ele.id)
  this.loadPage()
  this.selectData = res
  console.log('🚀 ~ this.selectData.filter ~  this.selectData:', res)
},

使用重载方法
 loadingCom() {
  this.loadingCom = false
  this.$nextTick(function () {
    this.loadingCom = true
  })
},

Answer 1

你遇到的问题是由于 Vue 的响应式系统没有及时检测到 selectData 数组的变化，导致页面没有正确更新。你提到使用 this.loadPage() 方法后问题解决了，这是因为你强制触发了组件的重新渲染。

解决

使用 Vue.set() 方法

tagClose(ele) {
  const arr = this.selectData;
  const res = arr.filter((item) => item.id !== ele.id);
  this.$set(this, 'selectData', res);
}