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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
Vue中添加滚动事件设置的方法详解
Sep 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
Zend 输出产生XML解析错误
2009/03/03 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP新手入门学习方法
2011/05/08 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
争先创优活动总结
2014/08/27 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
检讨书格式
2015/05/07 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
JS class语法糖的深入剖析
2022/07/07 Javascript