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