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,由于是国外网站导致更新较慢,该版本是在 ...
随机推荐
- PyCharm-汉化、中文语言包、英文语言包、中英文切换
PyCharm的汉化是非常简单的,不需要繁琐的步骤,只需要到设置的插件中搜索你需要的语言包安装即可. 登录 进入项目(随便进入一个项目,新建也可以) File->settings->Plu ...
- DP杂谈【持续更新中】
什么是DP? 推荐看一下. 正文 滚动数组优化 在一些空间贼小,时间还好的 DP 题目里,会用到优化空间的小技♂巧--滚动数组优化. 滚动数组,顾名思义,一个会滚动的数组,主要是怎样个滚法呢?接下来我 ...
- 【网络知识】虚拟机的桥接、NAT、仅主机模式分别是什么?
在我们安装 VMware 时,VMware 会自动三种 3 种网络连接模式,分别为VMnet0 (桥接模式).VMnet8 (NAT模式).VMnet1 (仅主机模式),当然我们也可以根据需要自行创建 ...
- PowerShell脚本的基础知识
参考文档https://learn.microsoft.com/zh-cn/powershell/scripting/samples/viewing-object-structure--get-mem ...
- C#设计模式19——装饰器模式的写法
装饰器模式(Decorator Pattern)是一种结构型设计模式,它允许你动态地给一个对象添加一些额外的职责,而不需要修改这个对象的代码. What(什么) 装饰器模式是一种结构型设计模式,它允许 ...
- 【HarmonyOS】如何获取公共目录的图片等文件(API7 FA模型JS语言)
[关键字] API7.JS.公共目录.@ohos.multimedia.mediaLibrary [前言] 在使用API7 JS开发HarmonyOS应用时,需要获取非应用目录即内部存储公共目录下 ...
- 记一次.Net分布式事务死锁现象以及解决方法
在本文中,将介绍一次遇到的.Net分布式事务死锁现象以及解决方法.我们将首先了解事务框架的构成,然后分析导致死锁的代码,最后提出解决方法. 事务框架 本次开发框架JMSFramework将分布式事务划 ...
- 查看C语言程序对应的汇编代码
在终端输入 gcc -S main.c 命令的意思是 编译不汇编 mian.c 可以换成想要汇编的C语言程序 然后生成 main.s 使用文本编辑器查看即可
- .NET EF查询需要注意的点
记录下在公司中混乱使用跟踪和非跟踪查询的坑. var blog = context.Blogs.Single(b => b.BlogId == 1); // 查询时放回一条 如果存在多条引发异常 ...
- Hexo博客Next主题文章置顶相关
我需要写一些文章做推荐相关,需要文章置顶功能 博客效果 置顶方法配置 一.修改库文件 原理 在Hexo生成首页HTML时,将top值高的文章排在前面,达到置顶功能. 修改方法 修改Hexo文件夹下的n ...