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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
validator验证控件使用代码
Nov 23 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
10 个经典PHP函数
2013/10/17 PHP
php获取根域名方法汇总
2014/10/28 PHP
jquery中的事件处理详细介绍
2013/06/24 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
python实现给数组按片赋值的方法
2015/07/28 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python flask搭建web应用教程
2019/11/19 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
基于FME使用Python过程图解
2020/05/13 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
.net工程师笔试题
2012/06/09 面试题
电气专业应届生求职信
2013/11/01 职场文书
中层干部岗位职责
2013/12/18 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
卫生标语大全
2014/06/21 职场文书
房屋过户委托书范本
2014/10/07 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
入党自荐书范文
2015/03/05 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
创业计划书之熟食店
2019/10/16 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript