ruoyi-vue中v-if与v-hasPermi同时用出现的bug
v-if和v-hasPermi的执行时机:v-if一般情况下总是优先于v-hasPermi执行的,但是对于上面复用元素的情况,元素从有到无的片刻间,两者可能同时执行,所以就会发生冲突。第一次渲染时,元素是显示的,由于vue的特性,它会复用该元素,在翻页后该元素原本是显示的,但此时v-if条件为false,隐藏了该元素,v-if的隐藏其实是把元素从dom中移除。于此同时在v-hasPermi指令内正
前两天前端项目出现了一个bug,折腾了好久才弄明白。
出错的场景是:当列表第一次渲染没有报错,但翻页时报下面的错。
浏览器控制台报错:vue.runtime.esm.js:619 [Vue warn]: Error in nextTick: "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."
报完上面的错后,再点击翻页就不起作用了。
下面是我找出来导致出错的代码:
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="270"
>
<template slot-scope="scope">
<div>
<div v-if="show" v-hasPermi="[x:x:x]">...</div>
</div>
</template>
</el-table-column>
为什么报错,我的猜测是:
第一次渲染时,元素是显示的,由于vue的特性,它会复用该元素,在翻页后该元素原本是显示的,但此时v-if条件为false,隐藏了该元素,v-if的隐藏其实是把元素从dom中移除。
于此同时在v-hasPermi指令内正在操作这个移除的元素,所以就报了上面的错。
总结来说就是当我们操作那些不存在的dom元素就可能报上面的错。
我们来画两个图解释一下:
这是正常DOM元素的执行过程,没什么问题。
这是复用DOM元素的执行过程,图中说明为什么会报错。
解决方案:添加key不让其复用。
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="270"
>
<template slot-scope="scope">
<div :key="Math.random()">
<div v-if="show" v-hasPermi="[x:x:x]">...</div>
</div>
</template>
</el-table-column>
更多推荐
所有评论(0)