無法訪問由所示的元素V-如果零部件組裝回調

<template> 
<div> 
    <transition name="fade" mode="out-in"> 

     <div class="ui active inline loader" v-if="loading" key="loading"></div> 
     <div v-else key="loaded"> 
      <span class="foo" ref="foo">the content I'm after is here</span> 
     </div> 

    </transition> 
</div> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       loaded: false 
      } 
     }, 
     mounted() { 
      setTimeout(() => { // simulate async operation 
       this.loaded = true 
       console.log($(this.$refs.foo).length, $(this.$el.find('.foo')).length) 
      }, 2000) 
     }, 
    } 
</script>

不管，如果我使用this.$refs或this.$el，我只能夠訪問裝載機DIV（<div class="ui active inline loader"/>）。無法訪問由所示的元素V-如果零部件組裝回調

我該如何訪問元件安裝時不存在的元件？我必須將v-if更改爲v-show嗎？

來源

2017-09-04 Johan

看起來像你應該'看着'加載'。 –

@RoyJ嗯，在'loading'改變後如何改變執行代碼？ – Johan

你究竟想要做什麼？如果'loading'爲'true'，則不存在'foo'元素來訪問。內容是否存在於您的模板中而不是您的視圖模型中？ –

Vue呈現給DOM asynchronously。因此，即使您將加載屬性設置爲true，ref也不會存在，直到Vue循環中的下一個打勾。

來處理，使用$nextTick方法。

console.clear() 
 

 
new Vue({ 
 
    el: "#app", 
 
    data:{ 
 
    loading: true 
 
    }, 
 
    mounted(){ 
 
    setTimeout(()=> { 
 
     this.loading = false 
 
     this.$nextTick(() => console.log(this.$refs.done)) 
 
    }, 1000) 
 
    } 
 
})

<script src="https://unpkg.com/[email protected]"></script> 
 
<div id="app"> 
 
    <div v-if="loading">Loading</div> 
 
    <div ref="done" v-else>Done</div> 
 
</div>

另外，在問題，v-if表達是loading這將始終是未定義的，因爲數據屬性被稱爲loaded。

來源

2017-09-04 17:22:23 Bert

謝謝，'加載'與'加載'是一個錯字... – Johan

無法訪問由所示的元素V-如果零部件組裝回調

回答

相關問題