解决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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
JSON 数据格式介绍
Jan 13 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
js正则相关知识点专题
May 10 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
浅析Python中的多进程与多线程的使用
2015/04/07 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python 三元运算符使用解析
2019/09/16 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
写自荐信的七个技巧
2013/10/15 职场文书
七一建党节演讲稿
2014/09/11 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
刘胡兰观后感
2015/06/16 职场文书
从事会计工作年限证明
2015/06/23 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript