vue+iview当v-for不渲染问题因为遇到Modal组件 <template lang="pug">
div#parent
Button(@click="data.push(Math.random())") 添加
span data：{{data}}
div(v-for="indx in data") {{indx}}
Modal
</template>
<script>
export default {
data() {
return {
data: []外商投资企业投资者股权变更的若干规定
};
}
};
山东行政学院学报
</script>
运⾏如上代码，当点击添加的时候data这个数组的确在不停的增加数据，但是那个v-for却只增加了⼀⾏ 就再也不动了。明明应该时data钟有多少就应该渲染多少⾏ 解决办法
1. 在v-for外⾯套⼀个div
瓜达尔港对中国的意义
2. 不要把Modal直接放在v-for后⾯ 可以提前去
原因分析
名门秀女
1. 通过分析 vue的 updateChildren函数 当数据变化的时候 这个函数会进⾏新旧虚拟节点vNode进⾏ 对⽐。并且如果有新的vNode的
时候会执⾏ 如下这个vue的函数来进⾏真实dom的更新
function insert(parent, elm, ref$$1) {
if (isDef(parent)) {
if (isDef(ref$$1)) {
if (ref$$1.parentNode === parent) { // 注意这⾥-
nodeOps.insertBefore(parent, elm, ref$$1);
封开论坛}
} else {
nodeOps.appendChild(parent, elm);
}
}
}
看到代码后⾯注释的这⼀⾏ 。
ref
1.parentNode === parent 如果Modal的附元素和v-for这个的⽗元素相等才会做插⼊操作。但是Modal这个元素⼜会被移动到body 下⾯去，所以导致了界⾯不更新的问题。综合自动化
注意
1. 这个例⼦代码刚开始出来会有⼀个undefined 请参考这个⽂章
2. 为什么点添加时还能渲染出⼀个，请研究vue中的updateChildren函数
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议