In my application, I have created two Vue components:
Vue.component('event', {
props:['event'],
template: `
<span class="pointer" @click="showModal = true">
{{event.evname}}
<modal @hide='hideModal' :event="event" :showModal="showModal">
<div slot="title">{{event.evname}}</div>
<div slot="content">{{event}}</div>
</modal>
</span>`,
data: function(){
return{
showModal: false
}
},
methods: {
hideModal: function(){
this.showModal = false
}
}
})
and
Vue.component('modal', {
props:['event', 'showModal'],
template: `
<div v-if="showModal" class="modalBack">
<div class="container modalPopup">
<div class="row">
<span class="col-lg-11"><slot name="title"></slot></span><span class="pointer col-lg-1" @click="hide">X</span>
<slot name="content"></slot>
</div>
</div>
</div>`,
methods: {
hide: function(){
this.$emit('hide')
}
}
})
Even though the modal displays correctly when I click on the event name, there seems to be an issue when I try to close the event by clicking the 'X' button on the modal. The 'hide' event is being emitted and the hideModal method in the event component is being executed, but the modal remains visible. Upon checking the console, I noticed that 'this.showModal' displays false after attempting to close it, however, when I log 'this' and inspect showModal, it still shows true.
Do you have any insights on what might be causing this behavior? The intended functionality is for showModal to be set to false, which should trigger the modal component to close.