Vue的数据更新,页面不更新的解决办法
可能原因
更新的数据跟源数据不是同一个,即不是同一个引用
解决办法
最稳妥的办法,可通过拿到源数据取索引的方式进行数据的更新,如:
有一个源数据叫:originData
那么如果在更新时,通过this.originData[index].time = newValue的方式进行更新,而不是item.time = newValue
这样,更新的是源数据,大概率可解决问题。
其他可能的原因及解决办法
页面组件重复
解决办法: 给组件加上key='xxx'xxx确保不要重复部分对象不支持更改,如:scope.row
解决办法: 新建对象let newObj = {...scope.row},甚至深拷贝let newObj = JSON.parse(JSON.stringify(scope.row))数据不是双向绑定
解决办法:响应式更新this.$set(this, '你的变量', 新值)数据层级过深
解决办法:强制更新this.$forceUpdate()
Vue的数据更新,页面不更新的解决办法的更多相关文章
- react-router url参数更新 但是页面不更新的解决办法
今天发现, 当使用react-router(v4.2.2)时,路由需要传入参数, 但是如果路由跳转时,url仅仅改变的是参数部分,如从hello/1跳转到hello/2,此时虽然参数更新了,但是页面是 ...
- Vue数据更新页面没有更新问题总结
Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以p ...
- Springboot静态文件不更新的解决办法,以及Springboot实现热部署
Springboot静态文件不更新的解决办法,以及Springboot实现热部署 原文链接:https://www.cnblogs.com/blog5277/p/9271882.html 原文作者:博 ...
- ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法
ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...
- Xamarin Android SDK无法更新的解决办法
Xamarin Android SDK无法更新的解决办法 Xamarin Android SDK无法更新的解决办法,更新时候,提示警告信息:A folder failed to be moved. ...
- hexo创建的tags和categories页面为空的解决办法
title: hexo创建的tags和categories页面为空的解决办法 toc: false date: 2018-04-16 02:26:10 主题:landscape 添加type以及men ...
- vue在html中出现{{}}原因及解决办法
在刚开始接触vue的时候,我们都是直接用<script>引入vue.js使用.没有借助vue-cli脚手架来构建项目. 对于一个初学者来说,跟着文档慢慢搬砖,使用vue进行数据绑定. 记得 ...
- vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...
- Android SDK Manager无法更新的解决办法
Fetching https://dl-ssl.google.com/android/repository/addons_list-1.xmlFailed to fetch URL https://d ...
- Android Studio Gradle更新的解决办法
环境: Win7_64旗舰版.Android Studio2.1.1 问题描述: 在打开Android Studio项目的时候,会下载项目对应版本的gradle,由于是国外网站导致更新较慢,该版本是在 ...
随机推荐
- 2020-10-14:Redisson分布式锁超时自动释放,会有什么问题?
福哥答案2020-10-14:#福大大架构师每日一题# [知乎:](https://www.zhihu.com/question/425541402) 如果线程1的锁被自动释放了,临界区的逻辑还没执行 ...
- pycharm eslint should be on a new line
修改前: "vue/max-attributes-per-line": [2, { "singleline": 10, "multiline" ...
- vue/cli3整合Cesium,加载离线arcgis 切片
最開始使用webpack進行cesium 集成, 出现了问题一大堆,最后只好选择传统的方法直接引入了,具体操作如下 目录 一.安装cesium 二.使用script引用cesium 1.切换到 nod ...
- Python数据类型 - 元祖
介绍 元祖和列表都是有序数列,列表是用 [ ],元祖使用() 元祖不同的地方在于创建后不能修改 注意:当元祖中只有一个元素的时候,要加上逗号(一个括号会被当成运算符使用) 比如: (123, ) ...
- harbor改造为https---血泪史
- MAUI Android 关联文件类型
实现效果 打开某个文件,后缀是自己想要的类型,在弹出的窗口(用其它应用打开)的列表中显示自己的应用图标 点击后可以获得文件信息以便于后续的操作 实现步骤 以注册.bin后缀为例,新建一个MAUI项目 ...
- 深度学习应用篇-推荐系统[12]:经典模型-DeepFM模型、DSSM模型召回排序策略以及和其他模型对比
深度学习应用篇-推荐系统[12]:经典模型-DeepFM模型.DSSM模型召回排序策略以及和其他模型对比 1.DeepFM模型 1.1.模型简介 CTR预估是目前推荐系统的核心技术,其目标是预估用户点 ...
- 用XmlSerializer.Deserialize将XML转实体遇到的问题
1.命名空间的问题 1.1 XML示例: 1.2 反序列化代码: 点击查看源代码 ``` public static object DeserializeFromXml<T>(string ...
- Mysql基础篇(一)之DDL、DML、DQL、DCL
一. SQL语句分类 SQL语句,根据其功能,主要分为四类:DDL.DML.DQL.DCL. 分类 全称 说明 DDL Data Definition Language 数据定义语言,用来定义数据对象 ...
- NoSuchMethodError: Closure call with mismatched arguments:
原因:某个方法的参数中,回调函数写的有问题,