Vue点击绑定@click的元素触发insertBefore相关TypeError报错如何解决

问题诱因 #

• 点击事件的变量名书写错误。你在@click绑定的处理逻辑是shows = !show，左侧赋值的变量是shows（多了后缀s），而v-if/v-else判断依赖的是show变量，两者不匹配。如果你的响应式变量实际定义的是show，该逻辑不会触发预期的状态更新；如果实际定义的是shows，那v-if/v-else的判断条件就是未定义的变量，都会导致渲染逻辑异常。
• v-if/v-else切换的两个<i>元素未指定唯一key。Vue默认会尽可能复用同类型的DOM节点，而你用的Font Awesome图标库如果加载的是JS渲染版本，会自动把<i>标签替换为真实的<svg>标签，导致Vue记录的虚拟DOM节点和真实DOM节点的对应关系错乱，更新时尝试操作已经被替换掉的null节点，就会抛出insertBefore相关的类型错误。

修复方案 #

1. 首先修正点击事件的变量名，保证和你定义的响应式变量名完全一致，假设你的状态变量是show，修正后的点击事件为：

<div class="button" @click="show = !show">

2. 给v-if和v-else对应的两个<i>标签分别添加唯一的key属性，强制Vue在切换时不复用节点，直接销毁旧节点、创建新节点，避免DOM映射错乱：

<div class="button" @click="show = !show">
  <i class="fas fa-plus-circle" v-if="show" key="plus-icon"></i>
  <i class="fas fa-minus-circle" v-else key="minus-icon"></i>
</div>

如果修改后还有报错，可以进一步把v-if/v-else替换为v-show，直接控制节点的显示隐藏，不会触发DOM的销毁重建，从根源避免节点操作异常：

<div class="button" @click="show = !show">
  <i class="fas fa-plus-circle" v-show="show" key="plus-icon"></i>
  <i class="fas fa-minus-circle" v-show="!show" key="minus-icon"></i>
</div>

内容的提问来源于stack exchange，提问作者Rene Rowell de la Rama