vue数据更新UI不刷新显示的解决办法


Posted in Javascript onAugust 06, 2020

vue比较常见的坑就是数据(后台返回)更新了,但是UI界面并没有更新,常见于以下情况:

一、数据为数组时

1.通过数组索引修改数组元素例如:

vue数据更新UI不刷新显示的解决办法

此时UI数据并不会刷新

2.修改数组长度时:

vue数据更新UI不刷新显示的解决办法

解决方案:

vue数据更新UI不刷新显示的解决办法

如果data为JSON数组则如下:

vue数据更新UI不刷新显示的解决办法

第一个参数为要更新数据的数组,第二个参数为要更新的数组中具体的元素下标,第三个参数为新数据

备注:

数组原型上的方法vue可直接检测到变化:push(),pop(),shift(),unshift(),splice(),sort()

二、数据为对象时:

Vue 不能检测对象属性的添加或删除:你可以这样添加一个属性

vue数据更新UI不刷新显示的解决办法

如果要添加多个属性可以

vue数据更新UI不刷新显示的解决办法

补充知识:vue computed计算属性和watch监听属性解疑答惑

computed计算属性

计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名。

相比于方法它的优势是只有当依赖的属性变化时,才会重新计算。而方法会在每次重新render的时候都会执行,因此计算属性相比方法性能明显更高,而且计算属

性可直接绑定在v-model属性上。计算属性还提供get和set方法进行读写操作。

vue数据更新UI不刷新显示的解决办法

watch方法

一旦监听了data中的属性,只要data数据变化了会立即触发watch方法,watch方法不仅可以监听变量,还可以监听对象里的某个属性,甚至是数组里的某个元素

html:

vue数据更新UI不刷新显示的解决办法

javascript:

vue数据更新UI不刷新显示的解决办法

以上这篇vue数据更新UI不刷新显示的解决办法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 #Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 #Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 #Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 #Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 #Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 #Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 #Javascript
You might like
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
团员个人的自我评价
2013/12/02 职场文书
新三好学生主要事迹
2014/01/23 职场文书
信息管理应届生求职信
2014/03/07 职场文书
《白鹅》教学反思
2014/04/13 职场文书
代理协议书
2014/04/22 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书