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://vuejs.org/v2/examples/modal.html
here is the app.vue
<template>
<div @click="showModal = true">
<font-awesome-icon style="color: white" 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 >
<div >
<h2 id="title">Dayy</h2>
</div>
<button @click="$emit('close')">Close</button>
<!-- <day-view></day-view> -->
</div>
</template>
<script>
export default {};
</script>
CodePudding user response:
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 >
<div >
<h2 id="title">Dayy</h2>
</div>
<button @click.stop="$emit('close')">Close</button>
<!-- <day-view></day-view> -->
</div>
</template>
<script>
export default {};
</script>