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下的keyCode键码值表
Apr 10 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
js命名空间写法示例
Dec 18 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
用原生js做单页应用
Jan 17 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
php递归实现无限分类的方法
2015/07/28 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
python3生成随机数实例
2014/10/20 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
Linux常见面试题
2016/10/04 面试题
三年级语文教学反思
2014/02/01 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
在校实习生求职信
2014/06/18 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
文明医院的标语集锦!
2019/07/24 职场文书