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í)條件明明不滿足，也會被觸發(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í)用的值，但我沒有意識到，總認(rèn)為對話框重新出現(xiàn)時(shí)，上面的變量一定是新的。

我的思維，還停留在原始的網(wǎng)頁開發(fā)上。眾所周知，http協(xié)議是無狀態(tài)的，網(wǎng)頁關(guān)閉、打開，所有的信息都是重新初始化過的。

而現(xiàn)在vue等開發(fā)平臺，默認(rèn)是單頁系統(tǒng)，只有一個(gè)頁面，所有東西在上面，基本都是動態(tài)加載，一旦加載，默認(rèn)又會緩存下來。

這樣做好許多好處，節(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)錯。

<!-- 當(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è)參考，也希望大家多多支持腳本之家。

最新評論