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 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 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
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
python获取外网ip地址的方法总结
2015/07/02 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Python tkinter实现日期选择器
2021/02/22 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
假释思想汇报范文
2014/10/11 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书