Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新
一、为什么需要使用Vue.set?
vue中不能检测到数组和对象的两种变化:
1、数组长度的变化 vm.arr.length = 4
2、数组通过索引值修改内容 vm.arr[1] = ‘aa’
Vue.$set(target,key,value):可以动态的给数组、对象添加和修改数据,并更新视图中数据的显示。
vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和setter 这两个方法,完成了对数据的绑定。所以直接通过vm.arr[1] = ‘aa’的方法,无法修改值去触发vue中视图的更新,必须还得通过Object.defineProperty的方法去改变,而Vue.$set()就封装了js底层的Object.defineProperty方法。
所以我们需要利用Vue.set() 响应式新增与修改数据。
二、Vue.set使用
Vue不能检测到对象属性的添加或删除。
由于Vue会在初始化实例时对属性执行getter/setter转化过程,所以属性必须在data对象上存在才能让Vue转换它,这样才能是响应式的。例如:
data () {
return {
form: {
total:
}
}
} // this.form.total是响应式的 // 若直接增加属性,是非响应式的
this.form.showFlag= true //非响应式的
使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上。Vue.set(this.form, 'showFlag', true)
还可以使用vm.$set实例方法,这也是全局Vue.set方法的别名:this.$set(this.form, 'showFlag', true)
这样,this.form.showFlag 就是响应式的了。
Vue.set(target, key/index, value) 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.obj.newProperty = 'hi'
)
官方文档:https://cn.vuejs.org/v2/api/#Vue-set
Vue.set( target, propertyName/index, value )
参数:
{Object | Array} target
{string | number} propertyName/index
{any} value
返回值:设置的值。
用法:
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如
this.myObject.newProperty = 'hi'
)注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。意思是,set 这个方法只能用于data 里面的子数组对象,而不能直接用于data (这个根数据)或者vue 实例
var vm = new Vue({
el:"#div",
data: {
items: ['a', 'b', 'c']
}
}); Vue.set(vm.items,,"ling")
设置数组元素:Vue.set(vm.items, 2, "ling") 表示把 vm.items 这个数组的下标为2 的元素,改为"ling",把数组 ["a","b","c"] 修改后是 ["a","b","ling"]
Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新的更多相关文章
- VUE 动态给对象增加属性,并触发视图更新。
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...
- problem:vue之数据变更没有触发视图更新问题
前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...
- (vue.js)axios interceptors 拦截器中添加headers 属性
(vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...
- vue数组对象修改触发视图更新
直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array. ...
- JavaScript 判断对象中是否有某属性
判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式. 一.点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined. ...
- JS删除对象中的某一属性(delete)
var obj= {} 1.JS对象添加新属性 obj.address="shenzhen" 2.JS删除对象中的某一属性(delete) var obj= { height: , ...
- 在linux中添加ftp用户,并设置相应的权限
在linux中添加ftp用户,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test 2.建用户:在root用户下: useradd ...
- linux中添加ftp用户,并设置相应的权限
在linux中添加ftp用户,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test 2.建用户:在root用户下: useradd ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Go defer 会有性能损耗,尽量不要用?
上个月在 @polaris @轩脉刃 的全栈技术群里看到一个小伙伴问 “说 defer 在栈退出时执行,会有性能损耗,尽量不要用,这个怎么解?”. 恰好前段时间写了一篇 <深入理解 Go def ...
- MVC中根据后台绝对路径读取图片并显示在IMG中
数据库存取图片并在MVC3中显示在View中 根据路径读取图片: byte[] img = System.IO.File.ReadAllBytes(@"d:\xxxx.jpg"); ...
- bootstrap fileinput实现限制图片上传数量及如何控制分批多次上传
废话没有,直奔主题 问题点: fileinput提供了一个maxFileCount用于限制图片上传的数量,设置maxFileCount为1时,一次性选择超过一张会有如下提示: 当选择一张,不点上传,再 ...
- 令人兴奋的TOP Server OPC Server v6.5 五大功能(下)
接上文. 2.MQTT客户端驱动程序自动标记生成(ATG) 使用过TOP Server OPC Server的大家可能还记得,在TOP Server OPC Server V6.4版本中,我们为MQT ...
- MapReduce1.x与MapReduce2.x差异
一.MapReduce1.x简介 1.图解 2.JobTracker 主节点,单点,负责调度所有的作用和监控整个集群的资源负载. 3.TaskTracker 从节点,自身节点资源管理和JobTrack ...
- Vue常用工具类方法 总结
1.利用Cookie,来设置接口携带的‘token’ 执行命令npm install js-cookie,在js工具类中引入, /** @format */ import Cookie from 'j ...
- 【书评:Oracle查询优化改写】第五至十三章
[书评:Oracle查询优化改写]第五至十三章 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知 ...
- Python爬虫系列:四、Cookie的使用
Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密) 比如说有些网站需要登录后才能访问某个页面,在登录之前,你想抓取某个页面内容是不允许的.那么 ...
- fiddler证书问题
1.清除C:\Users\Administrator\AppData\Roaming\Microsoft\Crypto\RSA 目录下所有文件(首次安装fiddler请忽略) 2.清除电脑上的根证书, ...
- Centos7安装DockerCE
1. 说明 以下使用的系统为centos7,64位,镜像为CentOS-7-x86_64-Minimal-1804,所有操作以root用户操作 2. 安装Docker官方源 2.1 安装yum工具集 ...