Vue click event not emitting properly to div

As shown in the code, I want to get a click event to trigger the pop up ‘add-day-form’ which is a component. But by putting the @click="showModal = true" in the wrapping div, when the pop up appears I cannot seem to press the close button that emits the close event. I only get it to close if i put the @click="showModal = true" on the font-awesome-icon. The component apears in both situations but the close event seems to only work when its not in the outside div (plusContainer) which is where I want it to be

*edit: it seems that if I listen for a dblclick event on the plusContainer, everything seems to work fine except for now I have to double click to open the component which is not ideal

I copied the vue pop-up modal from their site here https://v2.vuejs.org/v2/examples/modal.html

here is the app.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>

here is the form component

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

Answer

It looks like the click event is propagating to the plusContainer so it does a close and then immediately open again.

You may try to do: @click.stop=”$emit(‘close’)” on the form component:

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

Advertisement

Answer