vue(数据改变,DOM不渲染问题)
1、组件内部,属性值地址空间内引用地址改变,DOM不能渲染。
问题举例:this.items = [[],[],[],[]]
1、在items 中,修改任意一项数组中的值,DOM是不会更新的,
2、解决方案: this.items = [...this.items]。通过解构赋值,重新给items赋值。
2、组件之间传值,父组件传data改变,子组件未更新。
1、子组件中在mounted中对父组件传的值,进行了判断等相关处理,通过改变子组件自身定义的状态实现效果。
此时,父组件值更新,子组件不重新渲染,是因为,父组件值改变子组件不会走mounted的生命周期。
处理方案:
使用watch监听父组件传的值,当值改变的时候,进行对应操作。
2、推荐使用:
子组件中直接使用父组件传的值,如需类型转换或者简单判断,直接通过三目运算符判断使用,就省去了对 父组件传值的监听步骤。
vue(数据改变,DOM不渲染问题)的更多相关文章
- vue 数据改变但是视图没更新
在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...
- vuetify.js框架 下拉框数据改变DOM原数据未清除
今天遇到一个奇怪的bug 需求很简单,就是将“引擎能力”下拉框选中的值作为筛选条件传入到“样本类型”下拉框中,默认“样本类型”下拉框显示所有样本类型 看图: 如图所示,功能很简单. 其实还是对vuet ...
- vue数据修改 但未渲染页面
1. 普通的 `1.1 this.$set('obj',key,value); 1.2 this.splice(); 2.数据层次太多,没有触发render函数进行自动更新,需手动调用: this.$ ...
- vue中的dom基本渲染
一.输出动态标签请只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值,容易导致xss攻击. <div id="J_app"> <div v-html=& ...
- problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题
问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...
- vue中改变数组或对象,页面没做出对应的渲染
原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...
- Vue源码探究-虚拟DOM的渲染
Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...
- vue父组件数据改变,子组件数据并未发生改变(那是因为你没写监听)附带子组件的写法
下面的代码有 父组件有三个按钮,年.月.日 点击之后父组件的数据发生改变,子组件却没改变,打印接受的数据,除了第一次其他都没打印,那是因为你没有写监听 <template> <div ...
- Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...
随机推荐
- C++之new和malloc差别
在C++程序猿面试中.非常easy被问到new 和 malloc的差别.偶尔在quora上逛.看到Robert Love的总结.才发现自己仅仅知道里面的一两项就沾沾自喜,从来没有像这位大牛一 ...
- 图像处理之基础---基于opencv的灰度图像微分
argv分别为,可执行文件名.读入的原始图像.输出原始图像的灰度值.输出原始图像灰度值沿x轴方向的一阶微分.输出原始图像灰度值沿x轴方向的二阶微分. #include #include #includ ...
- easyUI datagrid 前端假分页
datagrid有两种分页方式,真分页和假分页. 所谓真分页,就是真的每次只获取一张分页的数据. 所谓假分页,就是将所有数据全部获取下来,然后利用其分页控件进行分页. 下面具体说说假分页: 1.dat ...
- 操作JSON对象
JSON类型对象,最简单了,就是键值对,key:value.key:value.一直不停地key:value下去,层层嵌套,理论上多少层都可以,只要你喜欢. 可是,每次应用JSON,我都心烦意乱,甚至 ...
- busybox的使用
1 将busybox设置为静态链接,放在文件系统中使用 make menuconfig的时候,Busybox Settings --> Build Options --> Build Bu ...
- lvm调整分区大小
1 问题 /home分区占用空间比较大,而/var分区比较小,它们位于同一个磁盘上.该系统安装了lvm. 2 减少/home分区空间 2.1 卸载/home umount /home 2.2 检查文件 ...
- 容器Vector原理(学习)
一.概述 数据结构同ArrayList,底层都是数组存储,只不过是线程同步的,也就是其 操作方法都是synchronized
- android studio 使用
java5-7适用android,java8对安卓支持不好. mac osx 需要安装jdk8, google Nexus模拟器, Intellij是JetBrains发布的. Intellij有2个 ...
- JavaScript 解析读取XML文档 实例代码(转)
JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来. 在线演示:http://demo.jb51.net/js/2012/readx ...
- .gitignore(转载)
转自:http://blog.csdn.net/liuqiaoyu080512/article/details/8648266 git 可以管理所有文件的变更, 但并不是所有文件都有意义. 大部分二进 ...