Vue.js中v-if值设置及任务删除后页面不更新问题排查

让我们一步步拆解你的问题，然后给出针对性的修复方案：

核心问题分析 #

1. 过渡组件使用错误：单个<transition>只适用于单个元素的过渡，列表循环的元素需要用<transition-group>；同时你的过渡组件位置不对，导致DOM结构异常，过渡无法触发。
2. 数据响应式失效：TaskItem组件把父组件传递的task prop存到本地data中，这会导致父组件更新task时，子组件无法同步响应；另外dbTasks初始化为对象而非数组，不符合任务列表的数据结构。
3. 事件传递缺失：子组件触发singleTaskDeleted事件时没有传递当前task对象，父组件无法定位到要标记为删除的任务。

具体修复步骤 #

1. 修正Tasks.vue的结构与过渡组件使用

把<transition>替换为<transition-group>，并调整DOM结构，确保过渡组件包裹整个列表项（<tr>）：

<template>
  <div>
    <!-- 其他内容 -->
    <table class="table">
      <transition-group name="fade" tag="tbody">
        <tr 
          v-for="task in tasks" 
          :key="task.id" 
          v-if="!task.deleted"
        >
          <task-item 
            @singleTaskDeleted="taskDeleted" 
            :task="task"
          ></task-item>
        </tr>
      </transition-group>
    </table>
    <!-- 其他内容 -->
  </div>
</template>

<script>
import TaskInput from './TaskInput.vue';
import TaskItem from './TaskItem.vue';
// 若需要处理非响应式对象，可引入Vue
// import Vue from 'vue'

export default {
  data : function (){
    return {
      dbTasks : []  // 修正为数组，符合任务列表结构
    }
  },
  computed : {
    tasks : function (){
      return this.dbTasks;
    }
  },
  components: { TaskItem, TaskInput },
  methods: {
    getTasks(){
      axios.get('tasks')
        .then( response => {
          this.dbTasks = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    taskDeleted(task){
      // 标记任务为已删除，用布尔值更符合v-if的判断逻辑
      task.deleted = true;
      // 若task是axios返回的非响应式对象，可使用：
      // Vue.set(task, 'deleted', true);
    }
  },
  created() {
    this.getTasks();
  },
  mounted() {
    console.log('Component mounted.')
  }
}
</script>

<style scoped>
/* 添加过渡效果的CSS */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
/* 可选：添加高度过渡让移除更平滑 */
.fade-leave-active {
  transition: all 0.5s ease;
}
.fade-leave-to {
  opacity: 0;
  height: 0;
  padding: 0;
}
</style>

2. 修正TaskItem.vue的响应式问题

移除本地singleTask数据，直接使用父组件传递的task prop，同时修复事件传递：

<template>
  <td class="task-item">
    {{ task.id }} - {{ task.text }}
    <button 
      type="button" 
      class="close" 
      aria-label="Close" 
      @click="deleteTaskItem(task.id)"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </td>
</template>

<script>
export default {
  props: ['task'],
  // 移除不必要的本地data
  mounted() {
    console.log('Component TaskItem mounted.')
  },
  methods: {
    deleteTaskItem : function (tid) {
      axios.delete('tasks/'+tid, {
        csrf : this.csrf,
        id : this.task.id
      })
      .then( response => {
        // 传递当前task对象给父组件
        this.$emit('singleTaskDeleted', this.task);
        console.log('Delete event emitted');
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
}
</script>

修复原理说明 #

• <transition-group>：专门用于列表元素的过渡，需要指定tag来保持DOM结构的合法性（这里用tbody替代原来的静态tbody），每个列表项必须有唯一的key。
• 响应式数据：直接使用父组件的task prop，确保父组件修改task.deleted时，子组件能实时响应；dbTasks初始化为数组，符合列表数据的存储需求。
• 事件传递：子组件触发事件时传递task对象，父组件能准确找到对应的任务并标记为删除，触发v-if的条件变化，进而触发过渡效果。

这样修改后，当你点击删除按钮时，任务会先标记为deleted: true，触发v-if隐藏，同时<transition-group>会执行淡出过渡，之后你不需要重新请求列表（当然如果需要确保数据一致性，可以在删除成功后重新拉取，但过渡效果已经可以通过前端状态变化实现）。

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