解決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(){ //刷新車(chē)輛保險(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)文章
一篇帶你搞懂Vue項(xiàng)目里的權(quán)限控制
這篇文章主要為大家介紹了vue項(xiàng)目里的權(quán)限控制，文中有詳細(xì)的代碼示例供大家參考，有需要的朋友可以借鑒參考下，希望能夠有所幫助2023-06-06
解決elementUI 切換tab后 el_table 固定列下方多了一條線(xiàn)問(wèn)題
這篇文章主要介紹了解決elementUI 切換tab后 el_table 固定列下方多了一條線(xiàn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue/react項(xiàng)目刷新頁(yè)面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法
Vue項(xiàng)目打包部署到線(xiàn)上后,刷新頁(yè)面會(huì)提示404,下面這篇文章主要給大家介紹了關(guān)于vue/react項(xiàng)目刷新頁(yè)面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法,文中將解決的辦法介紹的很詳細(xì),需要的朋友可以參考下2023-05-05
Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁(yè)的表格功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁(yè)的表格功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue項(xiàng)目中使用particles實(shí)現(xiàn)粒子背景效果及遇到的坑(按鈕沒(méi)有點(diǎn)擊響應(yīng))
為了提高頁(yè)面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面的粒子背景效果，本文給大家分享在實(shí)現(xiàn)過(guò)程中遇到問(wèn)題，需要的朋友一起看看吧2020-02-02
使用Vue.set()方法實(shí)現(xiàn)響應(yīng)式修改數(shù)組數(shù)據(jù)步驟
今天小編就為大家分享一篇使用Vue.set()方法實(shí)現(xiàn)響應(yīng)式修改數(shù)組數(shù)據(jù)步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue對(duì)象添加屬性(key:value)、顯示和刪除屬性方式
這篇文章主要介紹了vue對(duì)象添加屬性(key:value)、顯示和刪除屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue的全選組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要為大家詳細(xì)介紹了Vue使用echarts定制特殊的儀表盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue-calendar-component 封裝多日期選擇組件的實(shí)例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12