vue.js - 无法使用 Vuejs 从列表中删除选定的索引

Question

我面临着从列表中删除选定索引的巨大挑战我已经尝试过 splice 和 Vuejs delete() 函数，但我无法让它工作。

这是我想要实现的示例片段。

var app = new Vue({
    el:"#app",
    data:{
        list:[
            {name:'emi1',dob:'100583'},
            {name:'emi2',dob:'100584'},
            {name:'emi3',dob:'100585'},
            {name:'emi4',dob:'100586'},
            {name:'emi5',dob:'100586'},
            {name:'emi6',dob:'100586'},
            {name:'emi7',dob:'100586'},
            {name:'emi8',dob:'100586'},
            {name:'emi9',dob:'100586'},
            {name:'emi10',dob:'100586'},
            {name:'emi11',dob:'100586'},
            {name:'emi12',dob:'100586'},
            {name:'emi13',dob:'100586'},
            {name:'emi14',dob:'100586'},
            {name:'emi15',dob:'100586'},
            {name:'emi16',dob:'100586'},
            {name:'emi17',dob:'100586'},
            {name:'emi18',dob:'100586'},
            {name:'emi19',dob:'100586'},
            {name:'emi20',dob:'100586'},
            {name:'emi21',dob:'100586'},
            {name:'emi22',dob:'100586'},
            {name:'emi23',dob:'100586'},
            {name:'emi24',dob:'100586'},
            {name:'emi25',dob:'100586'}
        ],
        indexes:[0,3,5,7,10,15]
    },
    methods:{
        deleteSelected(){
            this.indexes.forEach((n,i)=>{
                this.$delete(this.list[n],n);
            }); 
        }
    }
    ,
    computed:{
        listrender:function(){
            return this.list;
        }
    }
});

当我回显列表时，它显示所述已删除的项目仍然存在。

我需要帮助。

Answer 1

vm.delete() 接受参数:

1. 对象或数组
2. 如果是对象则为键，如果是数组则为索引

但是您将数组的第 n 项作为第一个参数传递。

this.$delete(this.list[n],n);

所以改成

this.$delete(this.list,n);

这是 partly working fiddle

但是

有个小bug。如果您看到项目，您会发现正在删除的项目不是您要删除的项目。

例如，考虑前两个索引，即 0、3

所以需要删除的项目是{name:'emi1',dob:'100583'}和{name:'emi4',dob:'100586'}

但是 {name:'emi5',dob:'100586'} 被删除而不是 {name:'emi4',dob:'100586'}

发生这种情况是因为每次循环迭代都会修改列表，并且会从新修改的列表中删除第 n 个项目。

为了克服这个问题，向后循环this.indexes列表并删除每一项

deleteSelected() {
  for (let i = this.indexes.length - 1; i >= 0; i--) {
    this.$delete(this.list, this.indexes[i]);
  }
}

这是 working fiddle

注意事项

为此，this.indexes 中的索引必须按升序排列。如果不使用Array.prototype.sort() 对索引进行升序排序