vue.js - 无法访问组件安装回调中 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 asynchronously .因此，即使您将 loaded 属性设置为 true，ref 也不会存在，直到 Vue 循环中的下一个 tick。

要处理这个问题，请使用 $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。