He agregado un botón de cierre a un div en la ventana emergente de Calendly en VueJS y quiero cerrar este div cuando hago clic en el botón de cerrar. ¿Cómo puedo hacer esto?
Este es mi código de Calendly:
<TransitionRoot as="template" :show="openTimes"> <Dialog as="div" class="fixed inset-0 overflow-y-auto" @close="closeModal" :open="openTimes" :initialFocus="closeModalTimesRef" >Y este es el botón que he añadido.
<button type="button" class="close" @click="$emit('close')"> X </button>Probablemente desee utilizar la directiva v-if (u otros métodos de representación condicional disponibles en el enlace).
Por lo general, configura una clave como: showDialog: true en su objeto de datos/estado y la agrega a su cuadro de diálogo y captura el evento de cierre de esta manera:
<script> data() { return { showDialog: true; }; }, </script> <template> <dialog v-if="showDialog" @close="showDialog = false;" /> </template>Puedes usar algo como esto:
<button onclick="showOrCloseDiv()">Click The Button</button> <div id="thedivid"> JS tuto </div> <script> function showOrCloseDiv() { var v = document.getElementById("thedivid"); if (v.style.display === "none") { v.style.display = "block"; } else { v.style.display = "none"; } } </script>