文档章节

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

o
 osc_n6euf5h6
发布于 2019/03/19 23:09
字数 451
阅读 17
收藏 0

精选30+云产品,助力企业轻松上云!>>>

在开发过程中,我们时常会遇到这样一种情况:当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 属性是无效的。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
【HAVENT原创】Vue 动态给对象增加属性并触发视图更新

Vue 开发中,对象都能跟视图进行绑定,但是在绑定的对象上手动新增属性的时候却不会触发视图更新。 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。 Vue ...

HAVENT
03/18
21
0
Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

一、为什么需要使用Vue.set?   vue中不能检测到数组和对象的两种变化:   1、数组长度的变化 vm.arr.length = 4   2、数组通过索引值修改内容 vm.arr[1] = ‘aa’   Vue.$set(targ...

osc_y45xtjhw
2019/06/06
16
0
常见的vue.js基础面试题

vuejs 基础必备 1、active-class 是哪个组件的属性?嵌套路由怎么定义 active-class 是 vue-router 模块的 router-link 组件的属性 使用 children 定义嵌套路由 2、怎么定义 vue-router 的动...

大灰狼的小绵羊哥哥
2018/10/29
0
0
vue新增属性是否会响应式更新?

原文地址 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视...

osc_zg36vpk2
2019/05/09
2
0
vue数据双向绑定原理

参考官方文档:https://cn.vuejs.org/v2/guide/reactivity.html vue数据双向绑定原理: vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 因为vue是通过Object.definePr...

copperpeas
2018/08/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 那么长的绳子,你这是放风筝呢

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @ 巴拉迪维:黑豹乐队的单曲《无地自容》 耳畔突然响起旋律,是那首老歌。中国摇滚有了《一无所有》不再一无所有;中国摇滚有了《无地自容》不...

小小编辑
46分钟前
55
1
《吐血整理》-顶级程序员书单集

你知道的越多,你不知道的越多 给岁月以文明,而不是给文明以岁月 前言 王潇:格局决定了一个人的梦想,梦想反过来决定行为。 那格局是什么呢? 格局是你能够看见的深度、广度和密度。 王潇认...

敖丙
2019/12/11
8
0
我可以在Android版式中加下划线吗? - Can I underline text in an Android layout?

问题: 如何在Android布局xml文件中定义带下划线的文本? 解决方案: 参考一: https://stackoom.com/question/A31z/我可以在Android版式中加下划线吗 参考二: https://oldbug.net/q/A31z/...

法国红酒甜
49分钟前
26
0
干掉ELK | 使用Prometheus+Grafana搭建监控平台

什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB)。Prometheus使用Go语言开发,是Google BorgMon监控系统的开源版本。 Prometheus的特点 · 多维度...

木九天
今天
34
0
拉勾网拉你上勾

预览 需求简介 拉勾网是一个互联网行业的一个招聘网站,上面有许多职位,于是乎,小编想提取指定职位的基本信息(职位名,薪水,工作经验,工作地点,教育背景),然后插入 MongoDB 数据库,...

木下瞳
2019/04/17
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部