Vue2.0 $set()的正确使用方式

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)
}

Vue2.0 $set()的正确使用方式相关推荐

Python Matplotlib绘图的正确打开方式
Python Matplotlib绘图的正确打开方式文章目录 Python Matplotlib绘图的正确打开方式 1.先搞懂fig.axes.axis `Figure` `Axes` `Axis` ...
python null byte_如何以“正确”的方式处理带有nullbytes的Python unicode字符串？
问题 PyWin32似乎很乐意将以null结尾的unicode字符串作为返回值.我想用"正确"的方式处理这些字符串.在假设我得到一个字符串:u'C:\\Users\\Guest\ ...
opengl 贴图坐标控制_材质贴图正确打开方式
哈喽,各位观众朋友们好鸭~欢迎来到讲道理画图的地方,我是黄玮宁. 最近呀经常有小伙伴来问我那些不同通道的材质贴图该怎么用,而且频率不是一般的高,所以我觉得有必要来说说这些通道贴图的用法了. 视频版(B ...
Optional java 用法_Java8 Optional 的正确使用方式
1.当我们还在以如下几种方式使用 Optional 时, 就得开始检视自己了调用 isPresent() 方法时调用 get() 方法时 Optional 类型作为类/实例属性时 Optional ...
Console控制台的正确打开方式
Console控制台的正确打开方式 console对象提供了访问浏览器调试模式的信息到控制台 -- Console对象|-- assert() 如果第一个参数断言为false,则在控制台输出错误信息| ...
任务队列和异步接口的正确打开方式(.NET Core版本)
layout: post title: 任务队列和异步接口的正确打开方式(.NET Core版本) category: dotnet core date: 2019-01-12 tags: dotne ...
log python_基于Python log 的正确打开方式
保存代码到文件:logger.py import os import logbook from logbook.more import ColorizedStderrHandler import sm ...
python四舍五入round_四舍五入就用round( )？Python四舍五入的正确打开方式！
四舍五入就用round( )?Python四舍五入的正确打开方式! 2018-09-22 21:40 阅读数 4 <>round( )函数简介菜鸟教程中介绍到,round() 函数作用就 ...
android 数组指针异常,Android JSON解析Json数组是[]在解析时抛出空指针异常，如何以正确的方式写入？...
我有复杂的API,我解析并显示在列表视图中,我将努力解析JSONArray.Here我将在斗争之后Json数组这是在帖子json对象"tags_name":["Activ ...

Vue2.0 $set()的正确使用方式

Vue2.0 $set()的正确使用方式相关推荐

最新文章

热门文章