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 ...
随机推荐
- android插件化-apkplug从宿主启动插件Activity-06
插件是一个apk文件它存在自己的Activity界面和UI显示,本节将解说如何配置插件的启动Activity以及如何从宿主启动它. 一 配置插件apk的对外启动Activity (内部activity ...
- ubuntu下apache+mysql+php+mysql等之webserver搭建
相信非常多人跟我一样,想搭建一个自己的webserver.网上资料非常多.可是因为版本号的区别,总是存在依照一个教程来做无法全然实现的问题.近期我也折腾了好几天,google不能用,仅仅能百度,真想说 ...
- android菜鸟之路-事件分发机制总结(二)
ViewGroup事件分发机制 自己定义一个LinearLayout,ImageView和Button,小二,上代码 <LinearLayout xmlns:android="http ...
- ionic开发android App
在win下配置ionic可以参考七月的这篇博客:http://www.cnblogs.com/shikelong/p/4480975.html. 依照七月的思路基本可以创建一个ionic项目了,下面我 ...
- linux switch_root
1 命令格式 switch_root newroot init 跳转到另外一个文件系统,并且把newroot作为新的mount tree,并且执行init程序. 2 特殊要求 newroot必须是一个 ...
- go4--break,continue + 标签
package main /* 指针 Go虽然保留了指针,但与其它编程语言不同的是,在Go当中不 支持指针运算以及”->”运算符,而直接采用”.”选择符来操作指针 目标对象的成员 操作符”&am ...
- Lucas模板&快速幂模板
/* *********************************************** Author :guanjun Created Time :2016/5/20 0:28:36 F ...
- ATM网络
ATM是Asynchronous Transfer Mode(ATM)异步传输模式的缩写,是实现B-ISDN的业务的核心技术之一.ATM是以信元为基础的一种分组交换和复用技术
- HDU 4850 Wow! Such String!
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4850 题意:给定一个N(1 ≤ N ≤ 500000),构造一个长度为N的小写字母字符串,要求所有长度大于 ...
- CF17C Balance
题意 [题目描述] 一个仅由a,b,c三种字符组成的字符串,可以对其进行如下两种操作: 选择两个相邻字符,将第一个字符替换成第二个. 选择两个相邻字符,将第二个字符替换成第一个. 这样,通过任意多次的 ...