解决vue中对象属性改变视图不更新的问题


Posted in Javascript onFebruary 23, 2018

常规情况下我们在vue实例的data中设置响应数据。但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢?

实例代码如下:

let vm = new Vue{
 el: '#app',
 data: {
  obj: {
    k: 'v'
  }
 },
 ...
}

有三种解决方案:

方案一:利用Vue.set(object,key,val)

例:Vue.set(vm.obj,'k1','v1')

方案二:利用this.$set(this.obj,key,val)

例:this.$set(this.obj,'k1','v1')

方案三:利用Object.assign({},this.obj)创建新对象

例:

this.obj.k1='v1';
 this.obj = Object.assign({}, this.obj)

this.obj = Object.assign({}, this.obj,{'k1','v1'})

以上这篇解决vue中对象属性改变视图不更新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
javascript常见操作汇总
Sep 03 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
深入了解JavaScript 私有化
May 30 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 #Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 #Javascript
vue编译打包本地查看index文件的方法
Feb 23 #Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 #Javascript
Angular 向组件传递模板的两种方法
Feb 23 #Javascript
详解Node.js中的Async和Await函数
Feb 22 #Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 #Javascript
You might like
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
应届生如何写自荐信
2014/01/05 职场文书
项目合作意向书范本
2014/04/01 职场文书
移风易俗倡议书
2014/04/15 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
医师定期考核实施方案
2014/05/07 职场文书
通知函的格式
2015/04/27 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
JavaScript实现栈结构详细过程
2021/12/06 Javascript
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
MySQL创建管理HASH分区
2022/04/13 MySQL
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL