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 属性是无效的。

转载于:https://www.cnblogs.com/yg_zhang/p/10562161.html

VUE 动态给对象增加属性，并触发视图更新。相关推荐

vue2使用$set()使对象新增属性后触发视图更新
如图接口获取列表数组后,给每一个数组值插入一个自定义的属性,给一个默认值后面需要修改插入的属性的值修改后发现并未更改成功,值未改变.此时需要使用$set方法来出发数据的更新 this.$set(t ...
vue 不能响应set结构增加数据_Vue.set()动态的新增与修改数据,触发视图更新的方法...
参数: target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据(可以是字符串和数字) value :重新赋的值用法:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的, ...
vue this.$set 给data对象新增属性，并触发视图更新
往响应式对象this.$data中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新.它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 . data () {retu ...
【java】java反射机制，动态获取对象的属性和对应的参数值，并属性按照字典序排序，Field.setAccessible()方法的说明【可用于微信支付签名生成】...
方法1:通过get()方法获取属性值 package com.sxd.test.controller;public class FirstCa{private Integer num;private ...
JS学习笔记：Javascript给对象增加属性(函数作为属性)
//给对象增加属性(函数作为属性) let person1 = {};// 增加属性 person1.firstName = "John"; person1.lastName = ...
JS动态为对象添加属性
JS允许在创建完一个对象后,动态给对象添加属性.如下 var obj = {};// 动态给对象添加属性的常见方式 obj.name = 'aaa'; obj.age = 22; console.lo ...
Vue：触发视图更新的hack
前言触发视图更新的hack,hack的是什么?hack那些数据改变却没有被vue检测到的更新!那么vue有哪些情况是检测不到数据的变动的? 官方说明的有下面两大类: 数组使用下标更新数组元素: 使 ...
vue更新数组时触发视图更新的方法
参考原文: vue更新数组时触发视图更新的方法 - 大橙橙 - 博客园 vue数组对象修改触发视图更新 - 看风景就 - 博客园直接修改数组元素是无法触发视图更新的,如 this.array[0] ...
vue 加载页面时触发时间_5.6 vue更新数组时触发视图更新的方法，熟记JavaScript原生方法...
问题:vue更新数组时触发视图更新的方法变异方法: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.什么是变异方法呢?简单理解就是改变了原来的数组,可能包括数组长度length,或者 ...

VUE 动态给对象增加属性，并触发视图更新。

VUE 动态给对象增加属性，并触发视图更新。相关推荐

最新文章

热门文章