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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
JS判断数组那点事
Oct 10 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
微信小程序canvas实现签名功能
Jan 19 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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
ini_set的用法介绍
2014/01/07 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python实现随机漫步算法
2018/08/27 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python 获取项目根路径的代码
2019/09/27 Python
Python解析json代码实例解析
2019/11/25 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
新学期开学寄语
2014/01/18 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
优秀民警事迹材料
2014/01/29 职场文书
装修设计师求职信
2014/02/26 职场文书
校园运动会广播稿
2014/10/06 职场文书
社区宣传标语口号
2015/12/26 职场文书
redis lua限流算法实现示例
2022/07/15 Redis