vue數(shù)據更新了但在頁面上沒有顯示出來的解決方法
更新時間：2023年12月17日 09:40:24 作者：UserGuan
有時候 vue 無法監(jiān)聽到數(shù)據的變化,導致數(shù)據變化但是視圖沒有變化,也就是數(shù)據更新了,但在頁面上沒有顯示出來,所以本文給出了三種解決方法,通過代碼示例介紹的非常詳細,需要的朋友可以參考下
方法一：使用 this.$set() 進行數(shù)據更新
this.$set(target, key, value);
target：要更改的數(shù)據源(可以是對象或者數(shù)組)
key：要更改的具體數(shù)據
value：重新賦的值
基本語法(對象)：this.$set(要改變的對象，"要改變的對象屬性"，"新值")
基本語法(數(shù)組)：this.$set(要修改的數(shù)組，要修改的數(shù)組下標，{ "要修改的數(shù)組對象，一個/多個" })
例如：
定義數(shù)據
// 對象
obj: { name: "小明", age: 18 }
// 數(shù)組對象
arr: [{ name: "小王", age: 18 }, { name: "小張", age: 20 }]
// 普通數(shù)組
twoArr: [11, 22, 33]修改數(shù)據
// 對象
this.$set(this.obj, "name", "小劉")
console.log(this.obj) // obj={ name: "小劉", age: 18 }
// 數(shù)組對象
this.$set(this.arr, 1, { name: "小王", age: 19 })
console.log(this.arr) // arr=[{ name: "小王", age: 18 }, { name: "小王", age: 19 }]
// 普通數(shù)組
this.$set(this.twoArr, 0, 99)
console.log(this.twoArr) // twoArr=[99, 22, 33]新增數(shù)據
// 對象
this.$set(this.obj, "sex", "男")
console.log(this.obj) // obj={ name: "小明", age: 18, sex: "男" }
// 數(shù)組對象
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 }]
// 普通數(shù)組
const len2 = this.twoArr.length
this.$set(this.twoArr, len2, 44)
console.log(this.twoArr) // twoArr=[11, 22, 33, 44]方法二：使用 this.$forceUpdate() 進行強制更新
this.$forceUpdate() 強制更新方法，作用是觸發(fā) vue 的 update 方法
this.$forceUpdate(); // 強制更新
updateForm() {
this.formData.name = "張三";
this.$forceUpdate(); // 強制更新
},方法三：更改引用，創(chuàng)建一個新的數(shù)組或對象，替換舊的數(shù)組或對象，強制更新視圖
// 用于數(shù)組
this.recordList = [...this.recordList]
// 用于對象
this.recordObj = { ...this.recordObj }在 el-table 表格中數(shù)據發(fā)生變化了，表格未重新渲染的問題
解決辦法：
在 el-table 中添加一個 key 值，設置成 Boolean 類型，在數(shù)據更新后去更新這個 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, // 表格數(shù)據刷新標志
this.refreshTable = !this.refreshTable // 重新渲染表格
在數(shù)據更新的后面加上 this.refreshTable = !this.refreshTable 即可
以上就是vue數(shù)據更新了但在頁面上沒有顯示出來的解決方法的詳細內容，更多關于vue數(shù)據更新但頁面沒有顯示的資料請關注腳本之家其它相關文章！
相關文章
一文詳解如何在vue.config.js配置代碼混淆加密、壓縮
這篇文章主要介紹了如何在vue.config.js配置代碼混淆加密、壓縮的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-05-05
本文主要介紹了vue3實現(xiàn)長列表虛擬滾動的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01
VUE父組件異步獲取數(shù)據,子組件接收的值為空的問題
這篇文章主要介紹了VUE父組件異步獲取數(shù)據,子組件接收的值為空的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue 項目全屏插件screenfull使用案例,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
本文主要介紹了Vue3中列表拖拽排序的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
前端使用uniapp開發(fā)項目完成后，需要將頁面打包，生成H5的靜態(tài)文件，部署在服務器上這樣通過服務器鏈接地址，直接可以在手機上點開來訪問，下面小編給大家講解uniapp開發(fā)打包成H5部署到服務器的步驟，感興趣的朋友一起看看吧2022-11-11
這篇文章主要介紹了vue中跨域以及sessionId不一致問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue是當今增長最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語法非常直觀,并且具有友好的學習曲線,是開發(fā)人員最想學習的頂級前端庫之一,下面這篇文章主要給大家介紹了關于vue管理系統(tǒng)項目中的一些核心技能,需要的朋友可以參考下2022-05-05
營運三寶(九宮格、大轉盤、老虎機，當然此三寶當然是最基礎的營銷運營手段)，本片文章聊聊大轉盤，轉盤的實現(xiàn)邏輯應該是營銷方案較為簡單的一種了，本文將介紹如何實現(xiàn)大轉盤抽獎，感興趣的朋友可以參考下2021-05-05
這篇文章主要為大家介紹了如何利用Vue3制作簡單的消消樂游戲，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手試一試2022-05-05