解決vue this.$forceUpdate() 處理頁(yè)面刷新問(wèn)題（v-for循環(huán)值刷新等）
更新時(shí)間：2018年07月26日 11:31:31 作者：雪梅零落
這篇文章主要介紹了解決vue this.$forceUpdate() 處理頁(yè)面刷新問(wèn)題（v-for循環(huán)值刷新等），解決方法是使用this.$forceUpdate()強(qiáng)制刷新，文章給大家分享了代碼案例，需要的朋友參考下吧
問(wèn)題描述：
在使用Vue框架開(kāi)發(fā)時(shí)，在函數(shù)中改變了頁(yè)面中的某個(gè)值，在函數(shù)中查看是修改成功了，但在頁(yè)面中沒(méi)有及時(shí)刷新改變后的值；
解決：
運(yùn)用 this.$forceUpdate()強(qiáng)制刷新
代碼案例
<Select v-model="carSafeLine.insuranceName" placeholder="請(qǐng)選擇" class="mulisel option-h" filterable clearable :disabled="editstatus" @on-change="selectInsurance"> <Option v-for="item in dataArr" :key="item.code" :value="item.code" :label="item.codename" :disabled="item.disabled"></Option> </Select>
methods: {
selectInsurance(){ //刷新車輛保險(xiǎn)可選狀態(tài)
for(var i=0; i<this.dataArr.length; i++){
var flag = false; //默認(rèn)沒(méi)有選中
var itemI = this.dataArr[i];
for(var j=0; j<this.form.carInsuranceVOList.length; j++){ //檢測(cè)選項(xiàng)是否已被選中過(guò)
var itemJ = this.form.carInsuranceVOList[j];
if(itemI.code == itemJ.insuranceName){
flag = true;
break;
}
}
if(flag){
itemI.disabled = true;
}else{
itemI.disabled = false;
}
}
this.$forceUpdate(); //強(qiáng)制刷新，解決頁(yè)面不會(huì)重新渲染的問(wèn)題
}
}
總結(jié)
以上所述是小編給大家介紹的解決vue this.$forceUpdate() 處理頁(yè)面刷新問(wèn)題（v-for循環(huán)值刷新等），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
詳解TypeScript+Vue 插件 vue-class-component的使用總結(jié)
這篇文章主要介紹了TypeScript+Vue 插件 vue-class-component的使用總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
Vue-cli Eslint在vscode里代碼自動(dòng)格式化的方法
本篇文章主要介紹了Vue-cli Eslint在vscode里代碼自動(dòng)格式化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載示例
這篇文章主要為大家介紹了vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載的發(fā)發(fā)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue 推薦在絕大多數(shù)情況下使用模板來(lái)創(chuàng)建你的 HTML。然而在一些場(chǎng)景中，你真的需要 JavaScript 的完全編程的能力。這時(shí)你可以用渲染函數(shù)，它比模板更接近編譯器。下面就和小編一起來(lái)學(xué)習(xí)下面文章內(nèi)容吧2021-09-09
Vue實(shí)現(xiàn)table上下移動(dòng)功能示例
這篇文章主要介紹了Vue實(shí)現(xiàn)table上下移動(dòng)功能,結(jié)合實(shí)例形式分析了vue.js針對(duì)table表格元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02
使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟
createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個(gè)應(yīng)用實(shí)例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應(yīng)用,通過(guò) createApp 方法,我們從 Vue 3 的基本初始化開(kāi)始,擴(kuò)展到插件的應(yīng)用、多個(gè)應(yīng)用實(shí)例的創(chuàng)建等,需要的朋友可以參考下2024-05-05
在Vue當(dāng)中同時(shí)配置多個(gè)路由文件的方法案例代碼
這篇文章主要介紹了在Vue當(dāng)中同時(shí)配置多個(gè)路由文件的方法,包含具體代碼，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue打包上傳服務(wù)器加載提示錯(cuò)誤Loading chunk {n} failed
這篇文章主要為大家介紹了vue打包上傳服務(wù)器加載提示錯(cuò)誤Loading chunk {n} failed解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue+iview動(dòng)態(tài)渲染表格的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
Vue3中簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加路由
本文主要介紹了Vue3中簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加路由，，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05