vue数据更新了但在页面上没有显示出来的解决方法
作者：UserGuan
有时候 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 :key="refreshTable" :data="tableData" border>
<el-table-column type="index" label="序号" width="120" align="center" />
<el-table-column prop="userName" label="姓名" align="center" />
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button type="text" @click="toUpdate(scope.row)">修改</el-button>
<el-button type="text" @click="toDel(scope.row, scope.$index)">删除</el-button>
<el-button type="text" @click="toDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>refreshTable: false, // 表格数据刷新标志
this.refreshTable = !this.refreshTable // 重新渲染表格
在数据更新的后面加上 this.refreshTable = !this.refreshTable 即可
以上就是vue数据更新了但在页面上没有显示出来的解决方法的详细内容，更多关于vue数据更新但页面没有显示的资料请关注脚本之家其它相关文章！