循环添加一条数据之后，点击这条数据的删除，页面不改变 怎么解决

Question

循环添加一条数据之后，点击这条数据的删除，数据改变，页面不改变 怎么解决

  <vxe-column title="操作" width="10%" show-overflow>
                          <template #default="{ row, rowIndex }">
                            <vxe-button
                              type="text"
                              @click="download(row, rowIndex, tableData)"
                              >删除</vxe-button
                            >
                          </template>
</vxe-column>

 download(row, rowIndex, tableData) {
      tableData.splice(rowIndex, 1);
      console.log(tableData);
      console.log(this.tableData);
}

Answer 1

方法一：使用 Vue.set

import Vue from 'vue'

...

download(row, rowIndex, tableData) {
  Vue.set(tableData, rowIndex, {...row, isDelete: true})
}

方法二：使用 Vue.delete

download(row, rowIndex, tableData) {
  Vue.delete(tableData, rowIndex);
}