在vue.js中，页面更新控制台报错

vue.min.js:6 NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

查找网上的解决方法，发现是页面数据更新时，查找不到node，如果我们后续的js操作了v-if控制的dom元素，将会因为该部分dom元素不存在而抛出上述异常。是v-if和v-show滥用的问题，将v-if改成v-show，依旧解决不了问题，而且因为业务场景不能使用v-show，我的解决办法是在v-if的那个dom元素外面再包一层dom元素，将v-if的判断逻辑写在外面一层里

这是原代码

      <div  v-if="data.length&&data.length>0" @click="scrollClick($event)" style="height: 100%">

        <component :is="componentName" :data="data" :class-option="{ step: 0.3 }" class="warp pointerScroll" ref="seamlessScroll">

          <ul class="item">

            <li class="item-value" v-for="(item, index) in data" :key="index" :class="item.policyType==='0'&&item.executeResultType==='01' ? 'bgColorYellow' : ''">

              <span v-for="(value, i) in title" :key="i"  :data-index="index" :title="item[value.prop]">

                <template v-if="value.prop === 'fixed'">

                  <img

                    :src="item.geom ? locationImg : localtionNotImg"

                    style="width:10px;height:14px"

                    :style="{cursor: item.geom ? 'pointer' : 'not-allowed'}"

                    :data-index="index"

                  />

                </template>

                <template v-else>

                  #{item[value.prop] || '-'}

                </template>

              </span>

            </li>

          </ul>

        </component>  

      </div>

      <div v-else style="height: calc(100% - 30px)">暂无数据</div>

修改后的解决代码

<div v-if="data.length&&data.length>0" style="height: 100%">

      <div  @click="scrollClick($event)" style="height: 100%">

        <component :is="componentName" :data="data" :class-option="{ step: 0.3 }" class="warp pointerScroll" ref="seamlessScroll">

          <ul class="item">

            <li class="item-value" v-for="(item, index) in data" :key="index" :class="item.policyType==='0'&&item.executeResultType==='01' ? 'bgColorYellow' : ''">

              <span v-for="(value, i) in title" :key="i"  :data-index="index" :title="item[value.prop]">

                <template v-if="value.prop === 'fixed'">

                  <img

                    :src="item.geom ? locationImg : localtionNotImg"

                    style="width:10px;height:14px"

                    :style="{cursor: item.geom ? 'pointer' : 'not-allowed'}"

                    :data-index="index"

                  />

                </template>

                <template v-else>

                  #{item[value.prop] || '-'}

                </template>

              </span>

            </li>

          </ul>

        </component>  

      </div>

      </div>

      <div v-else style="height: calc(100% - 30px)">暂无数据</div>