vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法
更新時(shí)間：2023年07月04日 09:32:26 作者：奶糖?肥晨
這篇文章主要給大家介紹了關(guān)于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法,vue比較常見(jiàn)的坑就是數(shù)據(jù)(后臺(tái)返回)更新了,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
導(dǎo)文
在vue項(xiàng)目中，會(huì)遇到修改完數(shù)據(jù)，但是視圖卻沒(méi)有更新的情況
- vue 改變數(shù)據(jù)后，數(shù)據(jù)變化頁(yè)面不刷新
- vue 改變數(shù)據(jù)后，需要滑動(dòng)頁(yè)面，數(shù)據(jù)才更新
- vue中表格數(shù)據(jù)已改變，頁(yè)面卻未更新數(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="請(qǐng)選擇"> ... </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 自動(dòng)綁定到調(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ù)變化頁(yè)面不刷新解決的文章就介紹到這了,更多相關(guān)vue數(shù)據(jù)變化頁(yè)面不刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue模板配置與webstorm代碼格式規(guī)范設(shè)置
這篇文章主要介紹了vue模板配置與webstorm代碼格式規(guī)范設(shè)置詳細(xì)的相關(guān)資料,需要的朋友可以參考一下文章得具體內(nèi)容，希望對(duì)你有所幫助2021-10-10
這篇文章主要介紹了vue中vant組件樣式失效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
v-for循環(huán)遍歷數(shù)據(jù),永遠(yuǎn)不要把v-if和v-for同時(shí)用在同一個(gè)元素上,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文帶你詳細(xì)了解Vue中v-for的相關(guān)資料,需要的朋友可以參考下2022-10-10
無(wú)論是小型項(xiàng)目還是中大型項(xiàng)目，Vue-Router都是必選的一個(gè)組件，Vue-Router提供了便捷的方式進(jìn)行路由跳轉(zhuǎn)，在使用過(guò)程中有一些坑，希望能給在編碼找不到問(wèn)題時(shí)的碼農(nóng)提供一點(diǎn)靈感2022-06-06
vue中的v-model原理,與組件自定義v-model詳解
這篇文章主要介紹了vue中的v-model原理,與組件自定義v-model詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue3結(jié)合ts從零實(shí)現(xiàn)vueuse的useRouteQuery方法
這篇文章主要為大家詳細(xì)介紹了如何使用vue3與ts從零實(shí)現(xiàn)一個(gè)類(lèi)vueuse的useRouteQuery方法,并解決vueuse的useRouteQuery方法存在的一些問(wèn)題,感興趣的可以了解下2024-03-03
@change 是 Vue.js 中用于監(jiān)聽(tīng)表單元素值變化的事件處理器，這篇文章主要介紹了vue的@change的用法,需要的朋友可以參考下2023-10-10
vue 如何處理防止按鈕重復(fù)點(diǎn)擊問(wèn)題
這篇文章主要介紹了vue 如何處理防止按鈕重復(fù)點(diǎn)擊問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue+ts封裝axios網(wǎng)絡(luò)請(qǐng)求封裝方式
文章介紹了如何使用Vue和TypeScript封裝Axios網(wǎng)絡(luò)請(qǐng)求,并提供了一個(gè)示例文件`request.ts`,展示了如何封裝各種請(qǐng)求,此外,還提到了路由管理文件和狀態(tài)碼處理文件的結(jié)構(gòu)2025-12-12
vue實(shí)現(xiàn)購(gòu)物車(chē)功能（商品分類(lèi)）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車(chē)功能，商品分類(lèi)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04