I am experimenting a really weird behaviour from my Vue app.
I have the following two components inside one of my router views:
<bootstrap-table @showcurrent-click="handleShowcurrent"
@edit-click="handleEdit"
@delete-click="handleDelete"
@generated-id="retrieveID"
:columns="columns"
:data="data"
:options="options"></bootstrap-table>
<device-showcurrent :device="showCurrent"
:show="showShowCurrentModal"
@modal-close="handleHideShowcurrentModal"></device-showcurrent>
Inside my device-showcurrent component, which is a Bootstrap modal, I handle the hide.bs.modal event with JQuery and emit a custom modal-close event so I can handle the event from the router view component (you can see in the previous piece of code the @modal-close="handleHideShowcurrentModal") like this:
mounted: function(){
// Due to Javascript scope we assign this to a variable
instance = this
// This ID is generated on creation, and it works corretly.
// I also checked that this JQuery event was triggering.
$(`#${this.randomID}`).on('hide.bs.modal', e => {
instance.$emit('modal-close')
})
}
But the problem is that the event is not emitting from device-modal, but from bootstrap-table (checked through VueDevTools), so the first piece of code I posted does not work, but the following does:
<bootstrap-table @showcurrent-click="handleShowcurrent"
@edit-click="handleEdit"
@delete-click="handleDelete"
@generated-id="retrieveID"
@modal-close="handleHideShowcurrentModal"
:title="$t('message.audited_devices')"
:columns="columns"
:data="data"
:options="options"></bootstrap-table>
<device-showcurrent :device="showCurrent"
:show="showShowCurrentModal"></device-showcurrent>
What is happening here? How is it possible that the custom event is being emitted from another component?
Thank you very much!
I found the problem. I changed the mounted hook to:
mounted: function() {
let _this = this;
$(`#${this.randomID}`).on('hide.bs.modal', function(e) {
_this.$emit('modal-close')
})
}
It was probably a scope problem. which has been solved by:
_this) with let.It still feels quite strange because the event was being emitted, but that was probably because I also had an instance = this on my bootstrap-table component which was being globally scoped (Ì was not using let either).