Vue3中点击事件成功后从DOM移除节点的实现问题

你遇到的核心问题是没有更新组件的响应式数据源，Vue的DOM是基于数据驱动的，只要数据源info更新，DOM会自动同步，不需要用forceUpdate（而且你的用法也不对）。

为什么forceUpdate没用？ #

Vue3中，选项式API的$forceUpdate是组件实例的方法，正确写法是this.$forceUpdate()，但即使调用它，只要info数组没有变化，组件重新渲染后DOM还是和之前一样——因为数据没改，渲染结果不会变。

两种可行的解决方法 #

方法1：直接从info中移除已删除的项

在删除成功的回调里，过滤掉info中对应id的分类记录：

deleteCategory(id) {
  axios.delete('http://127.0.0.1:8000/api/categories/' + id, {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('apiToken')
    }
  })
  .then((response) => {
    alert('Category successfully deleted');
    // 遍历info的分组，过滤掉已删除的项
    this.info = this.info.map(categoryGroup => {
      return categoryGroup.filter(item => item.id !== id);
    }).filter(group => group.length > 0); // 移除空的分组
  }).catch((error) => {
    console.log(error);
  });
}

方法2：重新调用获取分类的接口

如果你的组件有获取分类列表的方法（比如getCategories()），可以在删除成功后重新拉取最新数据，彻底同步后端状态：

// 假设你有获取分类的方法
getCategories() {
  axios.get('http://127.0.0.1:8000/api/categories', {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('apiToken')
    }
  }).then(res => {
    this.info = res.data;
  });
}

// 修改deleteCategory方法
deleteCategory(id) {
  axios.delete('http://127.0.0.1:8000/api/categories/' + id, {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('apiToken')
    }
  })
  .then((response) => {
    alert('Category successfully deleted');
    this.getCategories(); // 重新获取最新分类列表
  }).catch((error) => {
    console.log(error);
  });
}

额外优化建议 #

你的模板里嵌套了两层v-for，而且外层的key用了foo（看起来是个无关变量），建议给循环项设置唯一的key，比如：

<template v-for="(categoryGroup, groupIndex) in info" :key="groupIndex">
  <template v-for="attributes in categoryGroup" :key="attributes.id">
    <tr>
      <!-- ... 内容不变 ... -->
    </tr>
  </template>
</template>

用attributes.id作为内层循环的key，能让Vue更高效地追踪DOM元素的变化。

内容的提问来源于stack exchange，提问作者cookie