在数组中查找对象

Question

我正在制作一个过滤器，允许用户单击一个复选框进行过滤。当我单击一个复选框时，它将把该项目的对象添加到过滤器数组中。再次单击该项目时，我将从阵列中删除该项目。

我正在对项目的对象使用硬代码，以确保每次单击时它们都是相同的对象。该对象看起来像这样：

var item1 = {name: "A", id: 1};

当我单击一个复选框，然后从Vuex调度动作时，将触发下面的toggleFilter方法。

methods: {
            toggleFilter(categoryId) {
                var item1 = {name: "A", id: 1};

                this.$store.dispatch('filter/toggleFilter', item1);
            }
        }

Vuex动作：

let actions = {
    toggleFilter({state, commit, rootState, rootGetters}, attribute) {
        let index = state.filters.indexOf(attribute);

        if (index === -1) {
            commit('addFilter', attribute);
        } else {
            commit('removeFilter', index);
        }

        console.log(state.filters);
    }
};

问题是当我再次单击复选框时，它没有从数组中删除对象，而是向其中添加了1个对象。

还有一个奇怪的事情是，我将Vuex动作的上面的代码用于另一个对象，就像这样：

methods: {
            toggleFilter(option) {
                option.attributeId = this.attribute.id;
                option.type = 'attribute';

                this.$store.dispatch('filter/toggleFilter', option);
            }
        }

它有效。我不知道为什么第一种情况不起作用，但是第二种情况却起作用。

Answer 1

每次创建新对象var item1 = {name: "A", id: 1};时，indexOf都找不到它。如果您的项目ID是唯一的，则可以尝试比较attribute.id

let actions = {
    toggleFilter({state, commit, rootState, rootGetters}, attribute) {
    let index = state.filters.map(item => item.id).indexOf(attribute.id);
        if (index === -1) {
            commit('addFilter', attribute);
        } else {
            commit('removeFilter', index);
        }

        console.log(state.filters);
    }
};