[英]Can't remove an item from an array Vuex
嘗試了我在此處找到的所有方法(包括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
屬性的 object ,但您傳遞給它的是一個具有item
屬性的 object ,因為您在傳遞它時將item
包裝在一個普通的 object 中。
更改deleteData
中的提交以傳遞項目而不先包裝它:
commit('itemDelete', item);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.