In my VueJS project, I have a parent component that contains a modal for submitting data. Once the data is submitted, the modal should automatically close and display the results on the parent page.
Inside the modal, there is a form that, when submitted, dispatches a store action and emits an event.
If I emit the event before dispatching the action, everything works as expected. However, if I do it inside the promise's then block, nothing happens.
Parent Component
Template
<template>
<div>
<div v-if="this.status !== 'loading'">
[...]
<v-dialog
v-model="modalAgregarCuenta"
fullscreen
hide-overlay
transition="dialog-bottom-transition">
<modal-agregar-cuenta
ref="modalAgregarCuenta"
@closeModal="modalAgregarCuenta = false">
</modal-agregar-cuenta>
</v-dialog>
[...]
</div>
[...]
</div>
Script
<script>
import ModalAgregarCuenta from './ModalAgregarCuentaBancaria';
[...]
export default {
components: {
'modal-agregar-cuenta': ModalAgregarCuenta,
[...]
},
data() {
return {
modalAgregarCuenta: false,
[...]
}
},
watch: {
[...]
modalAgregarCuenta(){
if( this.modalAgregarCuenta )
this.$store.dispatch(TRACKER_EVENT, { "vm": this, "eventName": 'modal-bank-add-open'});
else
this.$store.dispatch(TRACKER_EVENT, { "vm": this, "eventName": 'modal-bank-add-close'});
}
[...]
}
[...]
}
Child Component
Template
<template>
<v-card>
[...]
<v-container>
<v-form ref="formulario" v-model="validation" @submit.prevent="submitForm">
[...]
</v-form>
</v-container>
</v-card>
Script
<script>
[...]
methods: {
submitForm(){
console.log(this); //<-- Second image
//this.$emit('closeModal'); //<-- This line works properly
if(!this.$refs.formulario.validate())
return;
this.$store.dispatch(BANK_CREATE_REQUEST, {
cbu: this.cbu,
legalNumber: this.accountInformation.legal_number
})
.then((res) => {
this.$emit('closeModal'); //<-- This line does not
console.log(this); //<-- Third image
//this.closeModal();
//this.clear();
//this.closeModal();
//this.$emit('closeModal');
//this.$emit('closeModal');
/*setTimeout(()=>{
//$this.closeModal();
this.$emit('closeModal');
}, 2000);*/
})
.catch(err => err);
},
closeModal(){
this.$emit('closeModal');
},
clear(){
this.cbu = '';
this.legalNumber = '';
}
}
[...]
</script>
Upon checking Vue Devtools, it appears that the event is emitted correctly, as shown in the following image:
https://i.sstatic.net/sNu3g.jpg
I also observed a strange behavior when using the "console.log" function with "this" before and after dispatching. It seems that while the same component is logged in the console, some properties have different values:
Before
https://i.sstatic.net/XxO7K.jpg
After
https://i.sstatic.net/nYVcU.jpg
UPDATE
[BANK_CREATE_REQUEST]: ({commit}, {cbu, legalNumber}) => {
commit(BANK_CREATE_REQUEST);
commit(UI_LOADING, true);
return apiCall.post(WE_API + '/v3/bank', {
cbu: cbu,
legal_number: legalNumber,
legal_type: null
})
.then(res => {
commit(BANK_CREATE_SUCCESS, res);
commit(UI_LOADING, false);
return res;
})
.catch(err => {
commit(BANK_CREATE_ERROR);
commit(UI_LOADING, false);
throw err;
})
}
[BANK_CREATE_REQUEST]: (state) => {
state.status = 'loading';
},
[BANK_CREATE_SUCCESS]: (state, payload) => {
state.banks.push(payload.data.model);
state.status = 'success';
},
[BANK_CREATE_ERROR]: (state) => {
state.status = 'error';
},
Any assistance on this issue would be greatly appreciated.
Thank you.