vue+iview 当v-for不渲染问题 因为遇到Modal组件
来源:互联网 发布:java环境变量设置win7 编辑:程序博客网 时间:2024/05/21 15:44
<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钟有多少就应该渲染多少行
解决办法
- 在v-for外面套一个div
- 不要把Modal直接放在v-for后面 可以提前去
原因分析
- 通过分析 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); } } }
看到代码后面注释的这一行 。
ref1.parentNode === parent 如果Modal的附元素和v-for这个的父元素相等才会做插入操作。但是Modal这个元素又会被移动到body下面去,所以导致了界面不更新的问题。1:如果时我们这段代码的话就会把Modal这个dom元素传进来>并想在它之前插入新的元素。这里有一个判断ref
注意
- 这个例子代码刚开始出来会有一个undefined 请参考这个文章
http://blog.csdn.net/tearsknow/article/details/78411672 - 为什么点添加时还能渲染出一个,请研究vue中的updateChildren函数
阅读全文
0 0
- vue+iview 当v-for不渲染问题 因为遇到Modal组件
- Vue监听当数据发生改变v-for渲染完成
- Vue.js v-bind遇到的数据渲染问题
- VUE条件渲染(v-if v-show v-for)
- Vue.js中的列表渲染:v-for
- vue渲染多层数据用v-for
- Vue用v-for重渲染
- VUE指令-列表渲染v-for
- 使用vue的v-for与v-if遇到的一个问题
- vue v-for遇到的坑
- 8-Vue指令之列表渲染 V-for
- 监听vue.js中v-for全部渲染完成
- vue.js中的列表渲染(循环渲染)(v-for)
- Vue v-if条件渲染
- vue v-for v-if
- vue iview组件表格 render函数的使用
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- 关于iview表单验证select标签在使用v-for的时候验证一直不通过的问题
- 荣耀盒子如何连接电视机/电脑显示器/投影仪设备
- idea设置tomcat虚拟路径的两种方法
- js fileReader处理文件
- Spring IOC bean 的作用域
- 百度面试题 度度熊回家
- vue+iview 当v-for不渲染问题 因为遇到Modal组件
- struts2和前端通过json交互时数据解析问题
- 设计模式——享元模式
- WinSCP
- MFC 启用和禁用控件
- MongoDB学习笔记(一)
- Java中不同时区时间的转换
- ubuntu 配置证书登录
- 双击消息打开窗体