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 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
JavaScript模块详解
Dec 18 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
在 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
第十四节 命名空间 [14]
2006/10/09 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
php生成word并下载代码实例
2019/03/15 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Python读大数据txt
2016/03/28 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python txt文件如何转换成字典
2020/11/03 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
铭立家具面试题
2012/12/06 面试题
研究生自荐信
2013/10/09 职场文书
安全生产检查通报
2014/01/29 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
个人作风建设总结
2014/10/23 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
Selenium浏览器自动化如何上传文件
2022/04/06 Python