반응형
어레이 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
속성, 그러나 당신은 그것을 전달하고 있습니다.item
속성, 랩핑 중이기 때문에item
지나가는 동안 평범한 물체 안에.
의 커밋을 변경합니다.deleteData
먼저 포장하지 않고 통과시키려면:
commit('itemDelete', item);
언급URL : https://stackoverflow.com/questions/65379881/cant-remove-an-item-from-an-array-vuex
반응형
'programing' 카테고리의 다른 글
메모리 주소가 아닌 경우 C 포인터는 정확히 무엇입니까? (0) | 2022.08.22 |
---|---|
Vue.js 2 마우스 엔트리, 마우스 탈퇴 및 콘텐츠 드롭다운을 처리하는 방법 (0) | 2022.08.16 |
Vuetify 드롭다운 높이 감소 (0) | 2022.08.15 |
Vue를 사용하여 스택 크기를 초과한 비동기 함수 (0) | 2022.08.15 |
rest api에서 데이터를 가져오기 위해 vuex 저장소를 처리하는 방법 (0) | 2022.08.15 |