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实现复制功能各浏览器支持情况实测
Jul 18 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
js读取本地文件的实例
Dec 22 Javascript
如何更好的编写js async函数
May 13 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 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 dirname()与__FILE__常量的应用
2013/06/24 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
python简单实现旋转图片的方法
2015/05/30 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
C++面试题目
2013/06/25 面试题
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
门诊手术室工作制度
2014/01/30 职场文书
校庆筹备方案
2014/03/30 职场文书
公司委托书格式范本
2014/09/16 职场文书
道德与公民自我评价
2015/03/09 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
python井字棋游戏实现人机对战
2022/04/28 Python