I am using
"axios": "^0.19.0",
"vue": "^2.6.10",
"vuex": "^3.1.1"
My vuex action looks like this and calls a remote interface using axios. The request does work and it receives a valid response.
skipQuestion({commit}, payload) {
let params = {
answer: {
id: payload.id,
skipped: true,
}
};
return new Promise((resolve, reject) => {
commit(UPDATE_LOADING, true);
Remote.put(`/answer.json`, params)
.then((response) => {
commit(UPDATE_LOADING, false);
commit(SKIP_QUESTION, payload.id);
resolve();
})
.catch((error) => {
commit(UPDATE_LOADING, false);
reject(error);
})
})
},
The component Question does have the following method skip, which calls the vuex action skipQuestion and should emit the skip event to the parent component.
...mapActions(['skipQuestion']),
skip(evt) {
let payload = { id: this.question_id };
this.skipQuestion(payload).then( () => {
this.$emit('skip', this.uuid);
}).catch( (error) => {
console.log(error);
});
},
The problem is, that the skip event is not emitted to the parent when using it within the then block of the action. The vue developer console for chrome also confirms, that the skip event was fired. If I put the emit outside the block, everything works. Any suggestions whats going wrong?
Edit 1
Also tried the following code and both log statements are printed to the console.
skip(evt) {
let payload = { id: this.question_id };
let vm = this;
this.skipQuestion(payload).then( () => {
console.log('before skip emit');
vm.$emit('skip', this.uuid);
console.log('after skip emit');
}).catch( (error) => {
console.log(error);
});
},
from Vue.js component does not emit to parent after successful axios call
No comments:
Post a Comment