페이지를 새로 고치지 않으면 데이터 탭의 데이터가 삭제되지 않는 이유는 무엇입니까?

페이지를 새로 고치지 않으면 데이터 탭의 데이터가 삭제되지 않는 이유는 무엇입니까?

삭제 버튼이 있습니다.이 버튼을 누르면 행이 삭제되고 동작하고 있습니다만, 그 행을 삭제하려면 페이지를 갱신해야 합니다.페이지를 새로 고치지 않고 이 문제를 해결하고 행을 삭제하는 방법은 무엇입니까?

액션:

   deleteItem({commit}, pk) {
          axios.delete(`/myurl/${pk}`)
               .then(() => {
                 commit('removeItem', pk)
                }).catch(function (error) {
              //eslint-disable-next-line no-console
              console.log(error)
          })
       },

돌연변이:

  removeItem: (state, pk) => (state.allLists = 
       state.allLists.filter(item => item.pk !== pk)),

버튼:

  <v-data-table
       :items="allLists"
       :headers="headers"
       :search="search"
  >
       <template v-slot:item.action="{ item }">
           <v-row>
               <v-btn
                     small
                     text
                     dark
                     color="primary"
                     class="mb-2"
                     @click="del(item.pk)"
                >
                    <v-icon>mdi-delete</v-icon>
                </v-btn>
            </v-row>
        </template>
   </v-data-table>

메서드:

 methods: {
            ...mapActions(['fetchList', 'deleteItem', 'addItem']),

           del(ev) {
                 this.deleteItem(ev)
                },
          },
    }

당신의 돌연변이removeItem실제로 돌아오고 있다state.allLists = state.allLists.filter(item => item.pk !== pk).

이것은 둥근 괄호를 사용하고 있기 때문입니다.(). 괄호를 사용해야 합니다.{}변환은 다음과 같습니다.

removeItem: (state, pk) => {
    state.allLists = state.allLists.filter(item => item.pk !== pk)
}

일반적으로는 원래 어레이를 변환하지 않는 것이 좋습니다.삭제하고 싶은 아이템의 인덱스를 찾아서 붙이는 것이 좋을 것 같습니다.예를 들어 다음과 같습니다.

removeItem: (state, pk) => {
    const index = state.allLists.findIndex(item => item.id === pk.id);
    state.allLists.splice(index, 1);
}

이렇게 하면 컴포넌트의 상태에 액세스 할 때 페이지를 새로고침할 필요 없이 반응하여 올바른 값을 렌더링할 수 있습니다.

그나저나 어떻게 접근하고 있는 거야?allLists컴포넌트에 포함됩니까?

언급URL : https://stackoverflow.com/questions/59509220/why-data-in-data-tabel-is-not-deleting-without-refreshing-the-page