腳本之家服務器常用軟件

快捷導航

vue?v-if未生效問題及解決

更新時間：2024年03月04日 08:44:24 作者：左直拳

這篇文章主要介紹了vue?v-if未生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue v-if未生效問題

事實證明，v-if本身是沒有什么問題的，問題出在對應的變量身上。

前不久我使用VUE開發(fā)時遇到一個問題，好像v-if不起作用。

什么意思呢，v-if是一個條件表達式，當且僅當條件滿足時才觸發(fā)，但在我的程序中，它好像有時條件明明不滿足，也會被觸發(fā)。

這就很麻煩了。難道是VUE這個破爛不行？

事實上，VUE是沒啥問題的，是我不行。

代碼如圖：

問題其實出在"edit"這個變量里。

如果將edit換成“true/false”，就一點問題沒有，運行結果毫不含糊。

但換成變量就不一定了。

我這些代碼放在iView的一個模式對話框modal里，而modal的所謂關閉，其實只是隱藏，并沒有從內存中去掉。

當再次打開時，edit還是上一次展現時用的值，但我沒有意識到，總認為對話框重新出現時，上面的變量一定是新的。

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

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

這樣做好許多好處，節(jié)省資源，速度快，用戶體驗好。缺點，似乎是開發(fā)的復雜度增加了。

二者都對應條件，當條件不滿足時，v-if不加載，v-show加載但不顯示。

在運行過程中，v-if的條件切換，由不滿足到滿足時，v-if對應組件加載。

但這有個過程。期間組件不一定能訪問。

因此，需要將組件訪問語句放在this.$nextTick里，以免報錯。

<!-- 當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)
  })
},

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: