Skip to main content
 首页 » 编程设计

javascript之成功调用 axios 后,Vue.js 组件不会发送给父级

2023年08月27日25itcoder

我正在使用

"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.


长话短说


基本上您可以使用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 已注册