成功调用 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        });    }}它没有那么干净和优雅，但它完成了工作。