When does an element become available in dom after using vue v-if

May 6, 2022

When does an element become available in the dom after using a vue v-if? I would have thought you could do a query selector on the element after the v-if evaluates to true?

In the below code I need to get the .test element once the popout is shown but it shows as null – how do I get it?

new Vue({
  el: "#app",
  data() {
    return {
      showPopout: false,
    };
  },
  methods: {
    buttonClick(day) {
      this.showPopout = true;
      console.log(document.querySelector('.test'));
    },
  },
});

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<div id='app'>
  <span @click="buttonClick">show popout</span>
  <div v-if="showPopout"><span class="test">test</span></div>
</div>

>Solution :

It will be there after nextTick

new Vue({
  el: "#app",
  data() {
    return {
      showPopout: false,
    };
  },
  methods: {
    buttonClick(day) {
      this.showPopout = true;
      this.$nextTick(() => {
        console.log(document.querySelector('.test'));
      });
    },
  },
});

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<div id='app'>
  <span @click="buttonClick">show popout</span>
  <div v-if="showPopout"><span class="test">test</span></div>
</div>