Vue对象赋值视图不更新问题及解决方法


Posted in Javascript onJune 03, 2019

当我们需要对vue里面data数据做动态更新。

如下,实例化了Vue对象,其下vueData为data属性指向,现在我们需要由后台装载完整的data对象

Vue对象赋值视图不更新问题及解决方法

Vue对象赋值视图不更新问题及解决方法

现在我们需要装载更新完整的data对象,常规的赋值方式并不会引起视图的更新,双向绑定会失效。

如上图中默认broker_list为空对象,装载完之后broker_list 包含新项(ZY98)

Vue对象赋值视图不更新问题及解决方法

解决办法:

$.each(clientData, function (k, v) {
  Vue.set(vueData,k,Object.assign({}, v));
 });

clientData 为外部初始化的数据。

Object.assign({}, v)克隆一个新对象赋值给vueData中相关项,设置完后依然会更新视图,保证双向绑定有效。

总结

以上所述是小编给大家介绍的Vue对象赋值视图不更新问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
详解javascript函数的参数
Nov 10 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 #Javascript
JavaScript之数组扁平化详解
Jun 03 #Javascript
JavaScript从原型到原型链深入理解
Jun 03 #Javascript
生产制造追溯系统之再说条码打印
Jun 03 #Javascript
VUE安装使用教程详解
Jun 03 #Javascript
教你完全理解ReentrantLock重入锁
Jun 03 #Javascript
生产制造追溯系统之在线打印功能
Jun 03 #Javascript
You might like
PHP一些有意思的小区别
2006/12/06 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
Git命令之分支详解
2021/03/02 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
python爬虫之百度API调用方法
2017/06/11 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Python是什么 Python的用处
2020/05/26 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
旅游管理毕业生自荐书
2014/02/02 职场文书
经销商会议开幕词
2016/03/04 职场文书