¿Cuándo pasa a estar disponible un elemento en el dom después de usar un vue v-if ? ¿Hubiera pensado que podría hacer un selector de consulta en el elemento después de que v-if se evalúe como verdadero?
En el siguiente código, necesito obtener el elemento .test una vez que se muestra la ventana emergente, pero se muestra como nulo. ¿Cómo lo obtengo?
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>Estará allí después de 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>