vue v-if未生效問(wèn)題

事實(shí)證明，v-if本身是沒(méi)有什么問(wèn)題的，問(wèn)題出在對(duì)應(yīng)的變量身上。

前不久我使用VUE開發(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)再次打開時(shí)，edit還是上一次展現(xiàn)時(shí)用的值，但我沒(méi)有意識(shí)到，總認(rèn)為對(duì)話框重新出現(xiàn)時(shí)，上面的變量一定是新的。

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

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

這樣做好許多好處，節(jié)省資源，速度快，用戶體驗(yàn)好。缺點(diǎn)，似乎是開發(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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論