Vue3中v-for渲染列表触发parent is null错误及视图不更新求助

问题根源 #

1. v-for的key使用错误：Vue要求key必须是唯一的基本类型（字符串/数字），你直接传入整个对象（category或user）作为key，导致Vue无法正确追踪DOM节点的身份，触发更新时抛出parent is null异常。
2. DOM结构非法：分类列表模板中存在未闭合的<td>标签，破坏了DOM树结构，进一步加剧渲染错误。
3. 模板直接修改状态的隐患：虽然Vue允许在模板中直接修改属性，但这种写法不利于维护，且可能引发响应式更新异常。

修复步骤 #

1. 替换合法的v-for key值

使用每个项的唯一基本类型标识作为key：

• 分类列表：

<tr v-for="(category, idx) in categories" 
    :key="category.category" 
    @click="toggleCategory(category)">

• 用户列表（完整组件中）：

<tr v-for="(user, idx) in all_teams" 
    :key="user.username" 
    @click="selectUser(user)">

2. 修复DOM标签闭合错误

修正分类列表中未闭合的<td>：

<td class="text-success">
  <i class="fa-solid fa-minus text-danger" v-if="category.selected"></i>
  <i class="fa-solid fa-plus" v-else></i>
</td>

3. 统一状态修改逻辑到methods（推荐）

在组件中添加方法处理选中状态切换，避免模板直接操作数据：

// Options API示例
methods: {
  toggleCategory(category) {
    category.selected = !category.selected
  }
}

4. 确保数据响应式（针对Composition API）

如果使用Composition API定义categories，需用ref或reactive包裹：

import { ref } from 'vue'

const items = ['alimentos', 'licores', 'varios']
const categories = ref(items.map(item => ({
  category: item,
  selected: false
})))

验证效果 #

修复后，点击列表项时：

• 不会再抛出parent is null错误
• selected状态变更会立即同步到视图
• Vue调试器修改值的行为也能正常工作

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