Question

我有删除按钮，当我按此按钮时，它正在工作并删除该行，但是我应该刷新页面以使该行消失。如何解决此问题并删除行而不刷新页面？

动作：

   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)
                },
          },
    }

Answer 1

您的突变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？

为什么不刷新页面就不会删除数据表中的数据？

1 个答案: