时间戳

首页 > 解决方案 > 无法使用 Vuejs 从列表中删除选定的索引

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

问题描述

我面临着从尝试过 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;
        }
    }
});

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

请我需要帮助。

标签： vue.jsvuejs2

解决方案

vm.delete()接受参数：

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

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

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

所以改成

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

这是部分工作的小提琴

但

有一个小错误。如果您看到这些项目，您会发现要删除的项目不是您要删除的项目。

例如考虑前两个索引，即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]);
  }
}

这是工作小提琴

笔记

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

推荐阅读