programing

어레이 Vuex에서 항목을 제거할 수 없습니다.

prostudy 2022. 8. 15. 09:52
반응형

어레이 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

반응형