Cannot access element shown by v-if in component mounted callback

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>

Regardless if I use this.$refs or this.$el, I'm only able to access the loader div (<div class="ui active inline loader"/>).

How am I supposed to access an element which doesn't exist when the component is mounted? Do I have to change v-if to v-show?

Answer 1

Vue renders to the DOM asynchronously. So, even though you are setting your loaded property to true, the ref will not exist until the next tick in Vue's cycle.

To handle that, use the $nextTick method.

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>

Additionally, in the question, the v-if expression is loading which will always be undefined because the data property is called loaded.