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>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>