更多文章

最近在用 element-ui 开发一个网站，使用 table 组件时，发现修改完数据，有时候会延迟一两秒，页面才会发生变化。

看了一下代码，发现修改数据的代码是这样的

// popupData是修改的数据，修改完后，赋值给对应的表格数据
this.tableData[this.currentRow] = this.popupData

注意事项（以下内容摘自官方文档）

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({data: {items: ['a', 'b', 'c']}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

所以，解决方法就是用 Vue.set 来代替直接赋值

this.$set(this.tableData, this.currentRow, this.popupData)

转载于:https://www.cnblogs.com/woai3c/p/11021808.html

Vue 改变数据，页面不刷新的问题相关推荐

VUE定时器（页面定时刷新）
VUE定时器(页面定时刷新) 如果觉得页面上数据刷新缓慢,我们就可以使用vue中的定时器设置时间,五分钟.十分钟刷新一次都行. 一. //创建实例,可以取值,但是拿不到值 created(){} 二. ...
html 子框架刷新,webpack 热更新只对改变 CSS 有效改变 HTML 页面会刷新没用其他框架。...
写了一个很简单的demo,HMR 开启成功,但是只对改变 CSS 有效,改变 HTML 只会刷新页面,没有达到热替换的效果. global webpack version 3.3.0 Mac OS 1 ...
vue vue-router 同一个页面地址栏参数改变，页面不刷新的问题
vue-router 同一个页面地址栏参数改变(比如文章的发布和编辑是同一个页面),不会触发vue的created或者mounted钩子,所以数据不会重新渲染. 解决办法有两种: 1:监听地址栏变化 ...
vue删除数据，不刷新页面
对于循环出来的列表,会出现删除的按钮,删除当前的一条数据思想:点击当前的删除按钮事件时,需要把当前的index传入点击的时用splice删除数据的index,删除当前一条即可 splice:方法可 ...
解决vue跳转页面不刷新问题
1.问题: 我们常常需要使用$router.go(-1)返回之前的页面,但是却发现, 之前的界面,保持着上次跳转的状态2.原因: 使用$router.go(-1)返回,之前的数据都保留,并未刷新原来的 ...
mpvue入坑之修改数据页面不刷新
问题小程序开发是都会遇到数据更新了,但是页面的图元状态并没有更换. 通过接口获取数据进行更新, 但是数据改变了,页面的图元并没有变化. 方法一赋值之前先把数据置为空null, 在进行从新赋值操作 ...
vue跳转页面不刷新的问题
问题:跳转页面的时候,如果是之前打开过的页面,就会保持着上次跳转的状态不更新原因:vue-router的切换不同于传统的页面切换,而是路由之间的切换,其实就是组件之间的切换,引用相同组件的时候,会直 ...
Vue【有与无】【F3】【问题】vue 2.x 动态路由刷新后空白
先确认在route.js 或者 main.js 中有没有使用路由守卫vue.beforeEach和vue.addRouter() 促使页面每次刷新,重新根据后台返回数据生成动态路由. // 避免路由守 ...
Vue——路由变化页面数据不刷新问题
在项目中出现的情况是路由变化后,url变化了,但是页面没有刷新,手动刷新一下才出现应有的画面. 情况一: 在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过route ...
vue 路由参数变化，页面不刷新（数据不更新）解决方法
路由参数改变,页面数据不更新解决方法: http://localhost:8080/#test?id=1 http://localhost:8080/#test?id=2,参数切换后,数据未更新以下 ...

Vue 改变数据，页面不刷新的问题

更多文章

注意事项（以下内容摘自官方文档）

Vue 改变数据，页面不刷新的问题相关推荐

最新文章

热门文章