vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新的解決方法
更新時間：2023年07月04日 09:32:26 作者：奶糖?肥晨
這篇文章主要給大家介紹了關(guān)于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新的解決方法,vue比較常見的坑就是數(shù)據(jù)(后臺返回)更新了,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
導(dǎo)文
在vue項(xiàng)目中，會遇到修改完數(shù)據(jù)，但是視圖卻沒有更新的情況
- vue 改變數(shù)據(jù)后，數(shù)據(jù)變化頁面不刷新
- vue 改變數(shù)據(jù)后，需要滑動頁面，數(shù)據(jù)才更新
- vue中表格數(shù)據(jù)已改變，頁面卻未更新數(shù)據(jù)
文章重點(diǎn)
方法一：使用this.$forceUpdate()強(qiáng)制刷新
使用方法：直接調(diào)用即可，或者放到html里面使用
直接調(diào)用:
this.list.forEach((item)=>{
...
})
console.log(this.list,'this.list')
this.$forceUpdate()放到html里面使用:
<el-select v-model="..." @change="$forceUpdate()" placeholder="請選擇"> ... </el-select>
方法二：Vue.set(object, key, value)
使用方法：
add() {
this.$set(this.obj, 'name', '張三')
}方法三：this.$nextTick
this.$nextTick 將回調(diào)延遲到下次DOM更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待DOM更新。
this.$nextTick 跟全局方法 vue.nextTick 一樣，不同的是，回調(diào)的 this 自動綁定到調(diào)用它的實(shí)例上。
使用方法：
this.$nextTick(() => {
this.handerErrors()
})方法四：$set方法
使用方法：
//原代碼 this.list.a=1 //使用set方法 this.$set(this.list,'a',1)
總結(jié)
到此這篇關(guān)于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新解決的文章就介紹到這了,更多相關(guān)vue數(shù)據(jù)變化頁面不刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2實(shí)現(xiàn)無感刷新token的方式詳解
在Web應(yīng)用中,用戶需要通過認(rèn)證和授權(quán)才能訪問受保護(hù)的資源,為了實(shí)現(xiàn)認(rèn)證和授權(quán)功能,通常需要使用Token來標(biāo)識用戶身份并驗(yàn)證其權(quán)限,本文給大家介紹了vue2實(shí)現(xiàn)無感刷新token的方式,需要的朋友可以參考下2024-02-02
Vue-drag-resize 拖拽縮放插件的使用(簡單示例)
本文通過代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡單示例,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章介紹了在Linux服務(wù)器上部署vue項(xiàng)目的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
vue mint-ui學(xué)習(xí)筆記之picker的使用
本篇文章主要介紹了vue mint-ui學(xué)習(xí)筆記之picker的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式
這篇文章主要介紹了Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了利用Nuxt.js做Vuex數(shù)據(jù)持久化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問題及解決方法
這篇文章主要介紹了解決vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問題,本文通過兩種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
詳解vue2.0 transition 多個元素嵌套使用過渡
這篇文章主要介紹了詳解vue2.0 transition 多個元素嵌套使用過渡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了vue配置后臺接口方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
我們的數(shù)據(jù)存儲到數(shù)據(jù)庫,不就是以表格的形式存在嗎,所以在界面上顯示、操作,使用表格來處理也是非常合理的,這篇文章給大家介紹Element el-table 表格使用方法,感興趣的朋友一起看看吧2024-03-03