Como se muestra en el código, quiero obtener un evento de clic para activar la ventana emergente 'add-day-form', que es un componente. Pero al poner @click="showModal = true" en el div de envoltura, cuando aparece la ventana emergente, parece que no puedo presionar el botón de cierre que emite el evento de cierre. Solo consigo que se cierre si pongo @click="showModal = true" en el font-awesome-icon . El componente aparece en ambas situaciones, pero el evento de cierre parece funcionar solo cuando no está en el div externo (plusContainer), que es donde quiero que esté

* editar: parece que si escucho un evento dblclick en plusContainer, todo parece funcionar bien, excepto que ahora tengo que hacer doble clic para abrir el componente que no es ideal

Copié el modal emergente de vue de su sitio aquí https://vuejs.org/v2/examples/modal.html

aquí está la aplicación.vue

 <template> <div class="plusContainer" @click="showModal = true"> <font-awesome-icon style="color: white" class="fa-sm" icon="plus" /> <add-day-form v-if="showModal" @close="showModal = false" /> </div> </template> <script> import addDayForm from "./addDayForm.vue"; import dayView from "./dayView.vue"; export default { components: { addDayForm, dayView, }, data() { return { showModal: false, }; }, }; </script>

aquí está el componente de formulario

 <template> <div class="notifContainer"> <div class="heading"> <h2 id="title">Dayy</h2> </div> <button @click="$emit('close')">Close</button> <!-- <day-view></day-view> --> </div> </template> <script> export default {}; </script>