vue數(shù)據(jù)更新了但在頁面上沒有顯示出來的解決方法
更新時間：2023年12月17日 09:40:24 作者：UserGuan
有時候 vue 無法監(jiān)聽到數(shù)據(jù)的變化,導致數(shù)據(jù)變化但是視圖沒有變化,也就是數(shù)據(jù)更新了,但在頁面上沒有顯示出來,所以本文給出了三種解決方法,通過代碼示例介紹的非常詳細,需要的朋友可以參考下
方法一：使用 this.$set() 進行數(shù)據(jù)更新
this.$set(target, key, value);
target：要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)
key：要更改的具體數(shù)據(jù)
value：重新賦的值
基本語法(對象)：this.$set(要改變的對象，"要改變的對象屬性"，"新值")
基本語法(數(shù)組)：this.$set(要修改的數(shù)組，要修改的數(shù)組下標，{ "要修改的數(shù)組對象，一個/多個" })
例如：
定義數(shù)據(jù)
// 對象
obj: { name: "小明", age: 18 }
// 數(shù)組對象
arr: [{ name: "小王", age: 18 }, { name: "小張", age: 20 }]
// 普通數(shù)組
twoArr: [11, 22, 33]修改數(shù)據(jù)
// 對象
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ù)據(jù)
// 對象
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ù)組或?qū)ο?，替換舊的數(shù)組或?qū)ο螅瑥娭聘乱晥D
// 用于數(shù)組
this.recordList = [...this.recordList]
// 用于對象
this.recordObj = { ...this.recordObj }在 el-table 表格中數(shù)據(jù)發(fā)生變化了，表格未重新渲染的問題
解決辦法：
在 el-table 中添加一個 key 值，設(shè)置成 Boolean 類型，在數(shù)據(jù)更新后去更新這個 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ù)據(jù)刷新標志
this.refreshTable = !this.refreshTable // 重新渲染表格
在數(shù)據(jù)更新的后面加上 this.refreshTable = !this.refreshTable 即可
以上就是vue數(shù)據(jù)更新了但在頁面上沒有顯示出來的解決方法的詳細內(nèi)容，更多關(guān)于vue數(shù)據(jù)更新但頁面沒有顯示的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue-Cropper是一個基于Vue.js的圖像剪切組件,封裝了Cropper庫的功能,使其更易于在Vue.js項目中集成和使用,它可以與Vue的響應(yīng)式數(shù)據(jù)綁定,支持多種圖像格式和剪切形狀,提供了一些額外的功能,本文介紹在vue3中vue-cropper的初使用,感興趣的朋友一起看看吧2025-03-03
在本文里我們給大家整理了關(guān)于vue添加class樣式實例，對此有興趣的朋友們可以學習參考下。2019-02-02
這篇文章主要介紹了淺談vant組件Picker 選擇器選單選問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文主要介紹了vue3中使用jsx的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了vue+xlsx實現(xiàn)表格的導入導出功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
vue-router 中router-view不能渲染的解決方法
本篇文章主要結(jié)合了vue-router 中router-view不能渲染的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
解決Vue控制臺報錯Failed to mount component: tem
這篇文章主要介紹了解決Vue控制臺報錯Failed to mount component: template or render function not defined.問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了詳解新手使用vue-router傳參時注意事項，詳細的介紹了幾種常見錯誤，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
Vue事件處理是每個Vue項目的必要方面。 它用于捕獲用戶輸入，共享數(shù)據(jù)以及許多其他創(chuàng)造性方式。本文將通過簡單的示例為大家講解了Vue3中事件處理的使用，需要的可以參考一下2022-12-12
el-menu如何根據(jù)多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄
這篇文章主要介紹了el-menu根據(jù)多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07