尝试了我在此处找到的所有方法(包括 this.$delete)后，我无法从数组中删除项目。
findIndex 和 IndexOf 返回 -1，因此显然不起作用。
filter 或 splice 也不起作用。
我怀疑自己做错了什么。 我将不胜感激您的帮助
Vuex
namespaced: true,
state: {
coefficients: [],
},
mutations: {
getDataState(state, coefficients) {
state.coefficients = coefficients;
},
itemDelete(state, item) {
const index = state.coefficients.findIndex((el) => el.id === item.id);
if (index > -1) state.coefficients.splice(index, 1);
// #2 state.coefficients.splice(index, 1);
// #3
/* const index = state.coefficients.indexOf(item);
console.log(index, 'index');
if (index > -1) {
state.coefficients.splice(index, 1);
} */
},
},
actions: {
getData({ commit }, userData) {
api.get('/coefficients/')
.then((res) => {
commit('getDataState', {
coefficients: res,
});
})
.catch((error) => {
console.log(error, 'error');
commit('error');
});
},
deleteData({ commit }, { id, item }) {
api.delete(`/coefficients/${id}`)
.then((res) => {
commit('itemDelete', {
item,
});
console.log(res, 'res');
})
.catch((error) => {
console.log(error, 'error');
});
},
},
};
组件
<div v-for="(item, index) in this.rate.coefficients" :key="item.id">
<div>{{ item.model }}</div>
<div>{{ item.collection }}</div>
<div>{{ item.title }}</div>
<span v-on:click="deleteItem(item.id, item)">X</span>
</div>
/* ... */
methods: {
deleteItem(id, item) {
this.$store.dispatch('rate/deleteData', { id, item });
},
},
created() {
this.$store.dispatch('rate/getData');
},
最佳答案
您的 itemDelete 突变需要一个具有 id 属性的对象，但您正在向其传递一个具有 item 属性的对象，因为您是在传递时将 item 包装在普通对象中。
更改 deleteData 中的提交以传递项目而不先包装它:
commit('itemDelete', item);
关于javascript - 无法从数组 Vuex 中删除项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65379881/