如何解决拼接是否不从索引中拼接出来呢?
在这里使用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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。