无法访问组件已安装回调中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，直到Vue周期的下一个刻度之前，ref都将不存在。

要处理这一点，请使用$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表达式是loading，它将始终不确定，因为数据属性称为loaded。