VUE 动态给对象增加属性,并触发视图更新。
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。
根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。
我们编写如下代码测试给一个对象动态添加属性:
<div id="app">
<input v-model="form.amount" />
<input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: {
i:0,
form:{}
},
methods:{
demoSet(){
this.form.amount=this.i++;
//this.$set(this.form,"amount",this.i++);
}
}
});
</script>
这种方式可以给form增加一个属性,但是不会界面不会响应更新。
正确的做法:
<div id="app">
<input v-model="form.amount" />
<input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: {
i:0,
form:{}
},
methods:{
demoSet(){
this.$set(this.form,"amount",this.i++);
}
}
});
</script>
这样就可以给对象添加amount 属性了。
这个有什么应用场景呢,比如 data.form 属性很多,其中大部分是不需要要的,这时候,可以使用这种方法实现动态添加需要的属性。
需要注意的是,这种方式是不能给根数据添加属性的,比如:
<div id="app">
<input v-model="name" />
<input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: { },
methods:{
demoSet(){
this.$set(this,"name","ray");
}
}
});
</script>
这种方式给data 增加一个 name 属性是无效的。
VUE 动态给对象增加属性,并触发视图更新。的更多相关文章
- Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新
一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...
- Vue动态新增对象属性
Vue.set( target, key, value ) 参数: {Object | Array} target {string | number} key {any} value 返回值:设置的值 ...
- vue数组对象修改触发视图更新
直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array. ...
- 【java】java反射机制,动态获取对象的属性和对应的参数值,并属性按照字典序排序,Field.setAccessible()方法的说明【可用于微信支付 签名生成】
方法1:通过get()方法获取属性值 package com.sxd.test.controller; public class FirstCa{ private Integer num; priva ...
- Vue 动态修改data 值 并触发视图更新
Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新
- problem:vue之数据变更没有触发视图更新问题
前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...
- vue动态添加对象属性,视图不渲染
发现数据确实改变了.但是视图没有渲染.原因是赋值的问题,应该这样动态增加属性 vm.$set(vm.template.titleAttachInfoDetail,newKey,newVal) vm 当 ...
- vue 动态添加对象属性
昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)
- python动态获取对象的属性和方法 (转载)
首先通过一个例子来看一下本文中可能用到的对象和相关概念. #coding:utf-8 import sys def foo():pass class Cat(object): def __init__ ...
随机推荐
- select函数与I/O多路转接
select函数与I/O多路转接 相作大家都写过读写IO操作的代码,例如从socket中读取数据可以使用如下的代码: while( (n = read(socketfd, buf, BUFSIZE) ...
- 八(第三篇)、主体结构元素——time元素、pubdate属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSV文件乱码展示(编码格式问题)
最开始mac上打开CSV文件乱码,是这样的:CSV文件编码格式为UTF-8 解决办法一:将excel文件同样的转换编码格式为utf-8,具体操作如下: 去掉tab,勾选comma 最后,将文件另存为u ...
- 3.Jmeter参数化
1.参数化的三种方式 ${变量} 1 用户定义的变量 2 添加配置元件 CSV Data Set Config ,导入.csv文档 3 利用函数助手中的函数获取参数值 主要用 _Random函 ...
- 205. jetcache:你需要知道的小技巧
[视频&交流平台] àSpringBoot视频:http://t.cn/R3QepWG à SpringCloud视频:http://t.cn/R3QeRZc à Spring Boot源码: ...
- Python中的正则表达式(re)
import re re.match #从开始位置开始匹配,如果开头没有则无 re.search #搜索整个字符串 re.findall #搜索整个字符串,返回一个list 举例: r(raw)用在p ...
- OpenStack Trove组件WSGI和RPC调用流程(参考调用的整个过程)
参考博文:https://blog.csdn.net/bill_xiang_/article/details/72909927
- sass的基本使用
使用sass的前提是安装Ruby,如果是Mac系统,那么免去安装,Windows系统需要自行安装https://www.sass.hk/install/.当安装好以后,直接执行安装sass命令:gem ...
- Spring中@相关注解的意义
1.@controller 控制器(注入服务) 用于标注控制层,相当于struts中的action层 2.@service 服务(注入dao) 用于标注服务层,主要用来进行业务的逻辑处理 3.@rep ...
- jquery之过滤filter,not
<body> <h1>欢迎来到我的主页</h1> <p>我是唐老鸭</p> <p class="intro"> ...