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 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
React如何避免重渲染
Apr 10 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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实现字符串翻转的方法
2015/03/27 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
微信小程序实现简单表格
2019/02/14 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
python基于phantomjs实现导入图片
2016/05/13 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python 将pdf转成图片的方法
2018/04/23 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Python能做什么
2020/06/02 Python
如何使用Python调整图像大小
2020/09/26 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
2015年七一建党节演讲稿
2015/03/19 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python