成功调用 axios 后，Vue.js 组件不会发送到父组件

Question

我在用"axios": "^0.19.0","vue": "^2.6.10","vuex": "^3.1.1"我的vuex操作如下所示，并使用axios. 请求确实有效，并且收到了有效的响应。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);    });},问题是，在操作块skip内使用该事件时，该事件不会发送给父级then。chrome 的 vue 开发者控制台也确认skip事件已被触发。如果我将发射放在块外，一切正常。任何建议出了什么问题？

Answer 1

总结你给出的信息：

chrome 的 vue 开发者控制台也确认了跳过事件已被触发。

TL; 博士

vm.$emit 基本上调用中列出的每个方法 vm._events[eventName]

v-on通过context.listenersin注册createElemet并通过注入updateListeners

基本上你可以使用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);

    });

},

然后你知道发生了什么。

检查事项：

有效this范围

有效的 parent

实际触发时已解决

vm._events 挂号的

Answer 2

您丢失了对thisthen 块内的引用。引用现在是调用的回调函数。而是这样做

 ...mapActions(['skipQuestion']),

    skip(evt) {

        let payload = { id: this.question_id };

        let vm = this; // Preserve Vue instance for use inside block

        this.skipQuestion(payload).then( () => {

            vm.$emit('skip', vm.uuid);

        }).catch( (error) => {

            console.log(error);

        });

    },

Answer 3

我遇到了完全相同的问题，并且终其一生都无法弄清楚发生了什么。我能想到的就是，不知何故，组件在等待承诺解决时失去了发出事件的能力。

无论如何，我的解决方案是发出承诺本身，如下所示：

skip(evt) {

    let payload = { id: this.question_id };

    this.$emit('skip', skipQuestion(payload));

}

而在父母身上，你可以做

... @skip="receive_skip($event)" ...

...

methods: {

    receive_skip(skipped) {

        skipped

        .then((data) => {

            // do something on success

        })

        .catch((err) => {

            // do something on fail

        });

    }

}

它没有那么干净和优雅，但它完成了工作。