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