首頁猿問成功調用 axios...

成功調用 axios 后，Vue.js 組件不會發送到父組件

JavaScript

肥皂起泡泡 2021-11-25 16:14:30

我在用"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事件已被觸發。如果我將發射放在塊外，一切正常。任何建議出了什么問題？

查看完整描述

3 回答

守著星空守著你

TA貢獻1799條經驗獲得超8個贊

總結你給出的信息：

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 掛號的

反對回復 2021-11-25

catspeake

TA貢獻1111條經驗獲得超0個贊

您丟失了對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);

});

反對回復 2021-11-25

慕蓋茨4494581

TA貢獻1850條經驗獲得超11個贊

我遇到了完全相同的問題，并且終其一生都無法弄清楚發生了什么。我能想到的就是，不知何故，組件在等待承諾解決時失去了發出事件的能力。

無論如何，我的解決方案是發出承諾本身，如下所示：

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

});

}

它沒有那么干凈和優雅，但它完成了工作。

反對回復 2021-11-25

3 回答
0 關注
177 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

成功調用 axios 后，Vue.js 組件不會發送到父組件

成功調用 axios 后，Vue.js 組件不會發送到父組件

3 回答

添加回答

成功調用 axios 后，Vue.js 組件不會發送到父組件

成功調用 axios 后，Vue.js 組件不會發送到父組件