Удалить элемент из массива по идентификатору

Question

    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.

Можно ли нацелить идентификатор элемента и удалить его?определенный из checkedItems, поскольку текущее соединение удаляет неправильный элемент на основе индекса.

Answer 1

Почему бы не использовать объект вместо массива, что-то вроде этого:

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()