付公司网站建设费用会计分录,定制网站建设官网,网站建设与维护书籍推荐,淘宝官网电脑版登录界面这是因为有时候 vue 无法监听到数据的变化#xff0c;导致数据变化但是视图没有变化#xff0c;也就是数据更新了#xff0c;但在页面上没有显示出来。
方法一#xff1a;使用 this.$set() 进行数据更新
this.$set(target, key, value); target#xff1a;要更改的数据源…这是因为有时候 vue 无法监听到数据的变化导致数据变化但是视图没有变化也就是数据更新了但在页面上没有显示出来。
方法一使用 this.$set() 进行数据更新
this.$set(target, key, value); target要更改的数据源(可以是对象或者数组) key要更改的具体数据 value重新赋的值
基本语法(对象)this.$set(要改变的对象要改变的对象属性新值)
基本语法(数组)this.$set(要修改的数组要修改的数组下标{ 要修改的数组对象一个/多个 })
例如
定义数据
// 对象
obj: { name: 小明, age: 18 }// 数组对象
arr: [{ name: 小王, age: 18 }, { name: 小张, age: 20 }]
// 普通数组
twoArr: [11, 22, 33]
修改数据
// 对象
this.$set(this.obj, name, 小刘)
console.log(this.obj) // obj{ name: 小刘, age: 18 }// 数组对象
this.$set(this.arr, 1, { name: 小王, age: 19 })
console.log(this.arr) // arr[{ name: 小王, age: 18 }, { name: 小王, age: 19 }]
// 普通数组
this.$set(this.twoArr, 0, 99)
console.log(this.twoArr) // twoArr[99, 22, 33]
新增数据
// 对象
this.$set(this.obj, sex, 男)
console.log(this.obj) // obj{ name: 小明, age: 18, sex: 男 }// 数组对象
const len this.arr.length
this.$set(this.arr, len, { name: 小紫, age: 18 })
console.log(this.arr) // arr[{ name: 小王, age: 18 }, { name: 小张, age: 20 }, { name: 小紫, age: 18 }]
// 普通数组
const len2 this.twoArr.length
this.$set(this.twoArr, len2, 44)
console.log(this.twoArr) // twoArr[11, 22, 33, 44]
方法二使用 this.$forceUpdate() 进行强制更新
this.$forceUpdate() 强制更新方法作用是触发 vue 的 update 方法
this.$forceUpdate(); // 强制更新
updateForm() {this.formData.name 张三;this.$forceUpdate(); // 强制更新
},
方法三更改引用创建一个新的数组或对象替换旧的数组或对象强制更新视图
// 用于数组
this.recordList [...this.recordList]// 用于对象
this.recordObj { ...this.recordObj }
在 el-table 表格中数据发生变化了表格未重新渲染的问题
解决办法
在 el-table 中添加一个 key 值设置成 Boolean 类型在数据更新后去更新这个 key 值
例子如下
el-table :keyrefreshTable :datatableData borderel-table-column typeindex label序号 width120 aligncenter /el-table-column propuserName label姓名 aligncenter /el-table-column label操作 width200 aligncentertemplate slot-scopescopeel-button typetext clicktoUpdate(scope.row)修改/el-buttonel-button typetext clicktoDel(scope.row, scope.$index)删除/el-buttonel-button typetext clicktoDetail(scope.row)详情/el-button/template/el-table-column
/el-table
refreshTable: false, // 表格数据刷新标志
this.refreshTable !this.refreshTable // 重新渲染表格
在数据更新的后面加上 this.refreshTable !this.refreshTable 即可
