我正在使用
"axios": "^0.19.0",
"vue": "^2.6.10",
"vuex": "^3.1.1"
我的 vuex
操作看起来像这样并使用 axios
调用远程接口(interface)。该请求确实有效并且收到了有效响应。
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);
})
})
},
组件 Question
确实有以下方法 skip
,它调用 vuex
操作 skipQuestion
并且应该发出skip
事件传递给父组件。
...mapActions(['skipQuestion']),
skip(evt) {
let payload = { id: this.question_id };
this.skipQuestion(payload).then( () => {
this.$emit('skip', this.uuid);
}).catch( (error) => {
console.log(error);
});
},
问题是,在操作的 then
block 中使用 skip
事件时,它不会发送给父级。 chrome 的 vue 开发人员控制台也确认 skip
事件已触发。如果我将 emit 放在 block 外,一切正常。有什么建议出了什么问题吗?
编辑 1
还尝试了以下代码,两个日志语句都打印到控制台。
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);
});
},
编辑2
下面是用于监听子事件的模板代码:
<question v-bind="question"
:key="question.uuid"
v-if="questionReady"
v-on:skip="onSkipQuestion"
v-on:answer="onAnswerQuestion">
</question>
如前所述,如果不使用 axios
请求返回的 Promise/then-block,emit 会起作用。您将在下面找到应调用的方法:
methods: {
onSkipQuestion(payload) {
// this code is not executed
console.log('onSkipQuestion')
//....
},
//....
}
请您参考如下方法:
总结你给出的信息:
The vue developer console for chrome also confirms, that the skip event was fired.
长话短说
vm.$emit
基本上调用vm._events[eventName]
v-on
通过context.listeners
在createElemet
中注册并通过updateListeners
注入(inject)
基本上您可以使用debugger
语句进行调试:
skip(evt) {
let payload = { id: this.question_id };
this.skipQuestion(payload).then( () => {
debugger; // scope -> _events & scope -> $parent.componentInstance
// or console.log(JSON.stringify(this._events))
this.$emit('skip', this.uuid);
}).catch( (error) => {
console.log(error);
});
},
然后你就知道发生了什么了。
要检查的事情:
有效的
这个
范围有效的
父级
实际触发为已解决
vm._events
已注册