vue?v-if未生效問題及解決
vue v-if未生效問題
事實(shí)證明，v-if本身是沒有什么問題的，問題出在對應(yīng)的變量身上。
前不久我使用VUE開發(fā)時(shí)遇到一個(gè)問題，好像v-if不起作用。
什么意思呢，v-if是一個(gè)條件表達(dá)式，當(dāng)且僅當(dāng)條件滿足時(shí)才觸發(fā)，但在我的程序中，它好像有時(shí)條件明明不滿足，也會(huì)被觸發(fā)。
這就很麻煩了。難道是VUE這個(gè)破爛不行？
事實(shí)上，VUE是沒啥問題的，是我不行。
代碼如圖：
問題其實(shí)出在"edit"這個(gè)變量里。
如果將edit換成“true/false”，就一點(diǎn)問題沒有，運(yùn)行結(jié)果毫不含糊。
但換成變量就不一定了。
原因
我這些代碼放在iView的一個(gè)模式對話框modal里，而modal的所謂關(guān)閉，其實(shí)只是隱藏，并沒有從內(nèi)存中去掉。
當(dāng)再次打開時(shí)，edit還是上一次展現(xiàn)時(shí)用的值，但我沒有意識(shí)到，總認(rèn)為對話框重新出現(xiàn)時(shí)，上面的變量一定是新的。
我的思維，還停留在原始的網(wǎng)頁開發(fā)上。眾所周知，http協(xié)議是無狀態(tài)的，網(wǎng)頁關(guān)閉、打開，所有的信息都是重新初始化過的。
而現(xiàn)在vue等開發(fā)平臺(tái)，默認(rèn)是單頁系統(tǒng)，只有一個(gè)頁面，所有東西在上面，基本都是動(dòng)態(tài)加載，一旦加載，默認(rèn)又會(huì)緩存下來。
這樣做好許多好處，節(jié)省資源，速度快，用戶體驗(yàn)好。缺點(diǎn)，似乎是開發(fā)的復(fù)雜度增加了。
補(bǔ)充
v-if 與 v-show 的區(qū)別
二者都對應(yīng)條件，當(dāng)條件不滿足時(shí)，v-if不加載，v-show加載但不顯示。
在運(yùn)行過程中，v-if的條件切換，由不滿足到滿足時(shí)，v-if對應(yīng)組件加載。
但這有個(gè)過程。期間組件不一定能訪問。
因此，需要將組件訪問語句放在this.$nextTick里，以免報(bào)錯(cuò)。
<!-- 當(dāng)edit為真，加載Editor組件，否則加載Report組件 --> <Report ref="report1" v-if="!edit" /> <Editor ref="editor1" v-if="edit" />
checkOver () { // 校核歸來
this.edit = false
let _this = this
this.$nextTick(() => {
_this.$refs.report1.init(_this.id)
})
},
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標(biāo)簽
這篇文章主要給大家介紹了關(guān)于如何解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標(biāo)簽的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細(xì),對同樣遇到這個(gè)問題的朋友具有一定的參考解決價(jià)值,需要的朋友可以參考下2024-05-05
使用vue-antDesign menu頁面方式(添加面包屑跳轉(zhuǎn))
這篇文章主要介紹了使用vue-antDesign menu頁面方式(添加面包屑跳轉(zhuǎn)),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細(xì)介紹了require.js+vue+vue-router+vue-resource開發(fā)微信上傳圖片組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Element-Plus?el-col、el-row快速布局及使用方法
這篇文章主要介紹了Element-Plus?el-col、el-row快速布局及使用方法,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式
這篇文章主要介紹了關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
springboot + vue+elementUI實(shí)現(xiàn)圖片上傳功能
文章描述了如何使用Element UI的el-upload組件實(shí)現(xiàn)前端圖片上傳,并將圖片存儲(chǔ)到后端數(shù)據(jù)庫,同時(shí)在頁面上回顯上傳的圖片,后端通過接口接收圖片,并將其存儲(chǔ)在指定位置,然后返回圖片路徑以便在前端顯示,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)掃碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案
這篇文章主要給大家介紹了關(guān)于npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案,關(guān)于這個(gè)問題,通常是由于插件名稱輸入錯(cuò)誤、網(wǎng)絡(luò)問題或插件已被刪除引起的,文中將兩種解決方法都介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Transition內(nèi)置組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue實(shí)現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)
Vue實(shí)現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07