时间戳

首页 > 解决方案 > 通过 id 从数组中删除一个项目

vue.js - 通过 id 从数组中删除一个项目

问题描述

    data: function(){
            return {
            items: [
            { id: '1', name: 'Item 1', bool: false},
            { id: '2', name: 'Item 2', bool: false},
            { id: '3', name: 'Item 3', bool: false},
            { id: '4', name: 'Item 4', bool: false}
            ],
            checkedItems: [],
        };
    },

    methods: 
    {
        select: function(event, index) {
            if (!this.items[index].bool) {                    
                this.checkedItems.splice(index, 1);
            } else { 
                this.checkedItems.push(this.items[index]);
            }
        }
    }

当我单击div它时，它会将项目数据复制到checkedItems并设置bool为true.

是否可以定位项目 ID 并从中删除该特定 ID，checkedItems因为当前拼接正在根据索引删除错误的项目。

标签： vue.jsvuejs2

解决方案

为什么不使用对象而不是数组，如下所示：

data: function(){
            return {
            items: [
            { id: '1', name: 'Item 1', bool: false},
            { id: '2', name: 'Item 2', bool: false},
            { id: '3', name: 'Item 3', bool: false},
            { id: '4', name: 'Item 4', bool: false}
            ],
            checkedItemsObj: {},

        };
    },

    methods: 
    {
        select: function(event, index) {
            let item = this.items[index];

            if (!item.bool) {                    
                this.checkedItemsObj[item.id] = item 
            } else { 
                delete this.checkedItemsObj[item.id]  
            }
        },

        getCheckedItems: () => Object.values(data().checkedItemsObj)
    }

现在要随时获取检查项目的数组，您可以调用methods.getCheckedItems()

推荐阅读