vue数组中添加新字段，改变字段后值没有比变化

vue2.0 给data对象新增属性，并触发视图更新

如下代码，给 student对象新增 age 属性

data () {return {student: {name: '',sex: ''}}
}

众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新

mounted () {this.student.age = 24
}

原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。

但是，值得注意的是，网上一些资料写的$set()用法存在一些问题，导致在新接触这个方法的时候会走一些弯路！

错误写法：this.$set(key,value)（ps: 可能是vue1.0的写法）

mounted () {this.$set(this.student.age, 24)
}

正确写法：this.$set(this.data,”key”,value’)

mounted () {this.$set(this.student,"age", 24)
}

本文来自 Pany丨的CSDN 博客，全文地址请点击：https://blog.csdn.net/panyang01/article/details/76665448?utm_source=copy

vue数组中添加新字段，改变字段后值没有比变化相关推荐

Android4.0中添加新语言实现方案(以缅甸语为例)
查看了网上的一些关于Android2.3实现的添加新的语言的方案.我没有验证过但发现在4.0中不适用不适用的原因是: Android4.0中关于 icu4c模块(处理语言国际化模块)是通过dat ...
SqlServer表中添加新字段
表中添加新字段 ALTER TABLE 表名 ADD 字段名 VARCHAR(20) NULL 表中添加自增id alter table lianxi add id int primary key I ...
js将数组中一个或多个字段相同的子元素中合并
最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...
16.WireShark学习-在WireShark中添加新协议
16. 在Wireshark中添加新协议 WireShark编程基础使用Lua开发简单扩展功能使用WireShark开发新的协议解析器测试新协议 WireShark支持Lua语言编写的脚本 16 ...
wordpress添加媒体_如何在WordPress中添加新帖子并利用所有功能
wordpress添加媒体 Are you trying to create a new post in WordPress? Do you want to learn about all the W ...
微信云开发云数据库，数组中添加对象，修改数组中对象，删除数组中对象
添加向data数组中添加对象,代码如下,event._id,event.data,id要在哪条数据中添加对象,data为字段push为添加 ` const db = cloud.database() ...
linux 添加新的系统调用,如何在Linux中添加新的系统调用
如何在Linux中添加新的系统调用 2010-01-29 eNet&Ciweek #define __NR_mycall 191 系统调用号为191,之所以系统调用号是191,是因为Linux ...
js 对象中添加新属性
js 对象中添加新属性对象数组添加新属性同名属性会被覆盖,相同属性会去重

vue数组中添加新字段，改变字段后值没有比变化

vue2.0 给data对象新增属性，并触发视图更新

vue数组中添加新字段，改变字段后值没有比变化相关推荐

最新文章

热门文章