Estoy experimentando un comportamiento realmente extraño en mi aplicación Vue.
Tengo los siguientes dos componentes dentro de una de las vistas de mi enrutador:
<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> Dentro de mi componente device-showcurrent , que es un modal de Bootstrap, manejo el evento hide.bs.modal con JQuery y emito un evento modal-close personalizado para poder manejar el evento desde el componente de vista del enrutador (puede ver en el anterior pieza de código @modal-close="handleHideShowcurrentModal" ) así:
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') }) } Pero el problema es que el evento no se emite desde device-modal , sino desde bootstrap-table (comprobado a través de VueDevTools), por lo que el primer código que publiqué no funciona, pero el siguiente sí:
<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>¿Que está sucediendo aquí? ¿Cómo es posible que el evento personalizado se esté emitiendo desde otro componente?
¡Muchos gracias!
Encontré el problema. Cambié el gancho mounted a:
mounted: function() { let _this = this; $(`#${this.randomID}`).on('hide.bs.modal', function(e) { _this.$emit('modal-close') }) }Probablemente fue un problema de alcance. que ha sido resuelto por:
_this ) con let . Todavía se siente bastante extraño porque el evento se estaba emitiendo, pero eso probablemente se debió a que también tenía una instance = this en mi componente bootstrap-table que estaba siendo de alcance global (tampoco estaba usando let ).