拼接是否不从索引中拼接出来呢？

如何解决拼接是否不从索引中拼接出来呢？

在这里使用vue，尤其是vuex，尽管这可能是普通的js问题。我有一个购物车设置，可以在按下按钮时将其从产品列表推送到购物车，但是我无法从购物车中删除它来工作。这是我的方法；

孩子通过按钮调用动作；

<b-button @click="removeItem" variant="primary">Remove from Cart</b-button>

data() {
    return {
        singleCart: this.items,};
},methods: {
    removeItem() {
        this.$store.dispatch("DELETE_CART_ITEM",this.singleCart.item_id);
    },},

还有我的vuex存储区中的逻辑；

const actions = {
    ADD_TO_CART: (context,payload) => {
        context.commit('MUTATE_CART',payload)
    },DELETE_CART_ITEM: (context,payload) => {
        context.commit('DELETE_FROM_CART',payload)
    }
}

const mutations = {
    MUTATE_CART: (state,item) => {
        state.cart.push(item)
    },DELETE_FROM_CART: (state,payload) => {
        //filter the array for the item id,then splice it?

        console.log(payload)

        var index = state.cart.findindex(item => item.item_id === payload)

        console.log(index)

        console.log(typeof index)

        state.cart.splice(index,1)
    }
}

我的所有日​​志记录都显示正确的有效负载和购物车中该项的正确索引，但是当发生拼接时，即使它已通过起始索引，它也会删除列表中的最后一项。

例如，如果我的购物车中有3件物品，而我想删除第二件物品，它会找到正确的索引，在这种情况下，找到1个索引，并确定将其记录下来，然后无论出于何种原因，接头都会删除物品上的最后一件物品清单。为什么？而我将如何解决此问题？

解决方案：事实证明，我最终对如何调用我的getter数据感到困惑，解决方案位于父组件中，该父组件遍历购物车项目并使用计算属性来获取它； / p>

<div v-for="item in cart" :key="item.id">
<cartProduct :items="item" />
</div>

computed: {
    cart() {
        return this.$store.getters.GET_CART 
    }
},

因此是反应性的。

解决方法

这是一个奇怪的Vue警告。下面是在这种情况下不起作用的示例。

DELETE_FROM_CART: (state,payload) => {
        var index = state.cart.findIndex(item => item.item_id === payload);
        var dummy = state.cart.slice();
        dummy.splice(index,1);
        state.cart = dummy;
    }