Vue3点击按钮切换表格列显示隐藏时报错且路由失效问题

问题原因及解决方案 #

1. FontAwesomeIcon 切换无唯一key导致DOM复用错误

你当前用v-if/v-else切换两个图标时，Vue的diff算法会默认复用同位置的组件节点，而FontAwesome组件内部绑定的指令在复用节点时读取到未定义的value属性，正好对应你报错里的invokeDirectiveHook相关异常。
修复方法：给两个图标添加唯一的key属性：

<font-awesome-icon key="angle-right" icon="angle-double-right" v-if="!playersDetail"/>
<font-awesome-icon key="angle-left" icon="angle-double-left" v-else/>

2. v-for使用索引作为key引发diff异常

列表项v-for用数组索引index作为key，当你切换列显隐时，每个列表项的DOM结构发生了变化（新增/移除4个td节点），但key仍和之前一致，Vue会错误复用原有节点，更新过程中出现结构不匹配的问题，触发内部报错。
修复方法：将key替换为球员唯一标识（比如用户ID、用户名，保证不重复即可）：

<tr v-for="(j, index) in sortedLeaguePlayers" :key="j.id">
<!-- 或者 :key="j.username" -->

3. 批量同步更新触发调度器异常

你点击按钮时同时触发了三类DOM更新：外层div的栅格class切换、表头4个th的显隐切换、所有列表项的4个td的显隐切换、图标切换，大量同步更新任务在Vue调度器执行时发生冲突，中断了后续所有响应式任务执行，这也是为什么报错后路由完全失效：路由的跳转、组件渲染逻辑都属于Vue的响应式任务，被中断后无法再执行，必须刷新页面重启Vue实例才能恢复。
优化建议：如果修改key之后仍有问题，可以将状态更新放到nextTick中，避免批量同步更新冲突：

const toggleDetail = () => {
  nextTick(() => {
    playersDetail.value = !playersDetail.value
  })
}

点击事件对应替换为@click="toggleDetail"即可。

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