Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which

由于我写的单选框是按条件进行展示，故外层包了templete并赋值v-if="form.linkType !== 0"判断，当linkType值不为0展示

        <template v-if="form.linkType !== 0">
          <el-col :span="12">
            <el-form-item label="链接页面" prop="linkUrl">
              <el-input
                v-model="form.linkUrl"
                placeholder="请输入"
                :disabled="form.linkType === 3 || form.linkType === 4"
              >
                <el-button
                  v-if="form.linkType === 3 || form.linkType === 4"
                  slot="append"
                  type="primary"
                  @click="showPickerModal"
                >
                  选择
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </template>

问题描述

在使用vue的时候，我们因为常用v-if改变了页面的DOM结构，可能会遇见这样的告警信息，并且页面会被卡主，当切换单选框时报错，需要刷新才可以解决：

Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node bef

问题解决

解决方案是在template外层再套一层div，在div上做v-if判断即可解决

        <div v-if="form.linkType !== 0">
          <template>
            <el-col :span="12">
              <el-form-item label="链接页面" prop="linkUrl">
                <el-input
                  v-model="form.linkUrl"
                  placeholder="请输入"
                  :disabled="form.linkType === 3 || form.linkType === 4"
                >
                  <el-button
                    v-if="form.linkType === 3 || form.linkType === 4"
                    slot="append"
                    type="primary"
                    @click="showPickerModal"
                  >
                    选择
                  </el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </template>
        </div>

文章参考：https://blog.youkuaiyun.com/zxy010714/article/details/108594820

------------------------日常BUG解决记录----------------------