无法访问组件挂载回调中 v-if 显示的元素

Question

<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-if到v-show？

Answer 1

Vue异步渲染到 DOM 。因此，即使您将加载的属性设置为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/vue@2.4.2"></script>
<div id="app">
  <div v-if="loading">Loading</div>
  <div ref="done" v-else>Done</div>
</div>

此外，在问题中，v-if表达式 is loadingwhich 将始终未定义，因为 data 属性被调用loaded。