如何使用 Vue.js 将对象从 axios catch 块传递到父组件答案

【问题标题】：How to pass an object from axios catch block to parent component with Vue.js如何使用 Vue.js 将对象从 axios catch 块传递到父组件
【发布时间】：2021-04-08 23:21:24
【问题描述】：

我正在使用 Laravel 7 和 Vue.js 2。

我想将 axios 调用的 catch 块中的验证错误对象传递给父组件，但由于某些原因它不起作用。

这是axios调用的代码：

        runReport: function() {
            let self = this;
            const url = "api/get_report?room="+this.formReport['room']+"&participant="+this.formReport['participant']+"&start="+this.formReport['start']+"&end="+this.formReport['end'];
            axios.get(url)
            .then((response) => {
                console.log(response.data.data);
                this.meetingsReport = response.data.data;
                this.$emit('passMeetings', this.meetingsReport);
                this.$emit('success');
                this.errors = {};
            })
            .catch(function(error) {
                console.log(error.response.data);
                self.errors = error.response.data;
                alert(self.errors);
                self.$emit('failure');
                self.$emit('passErrors', self.errors); //problem
                console.log('call ended');
            });
        }

这是父组件中的代码：

<template>
    <div>
        <report-meeting @passMeetings="onPassMeetings" @failure="displayTable=false" @success="displayTable=true"></report-meeting>
        <hr>
        <validated-errors :errorsMeeting="errorsMeeting" @passErrors="onPassErrors" v-if="displayTable===false"></validated-errors>
        <table-report :meetingsSelected="meetingsSelected" v-if="displayTable===true"></table-report>
    </div>
</template>

<script>
    import TableReport from "./TableReport.vue"
    import ReportMeeting from "./ReportMeeting.vue"
    import ValidatedErrors from "./ValidatedErrors.vue"

    export default {
        components: {
            'table-report': TableReport,
            'report-meeting': ReportMeeting,
            'validated-errors': ValidatedErrors
        },
        mounted() {
            console.log('Component mounted.');
        },
        data: function() {
            return {
                displayTable: false,
                meetingsSelected: {},
                errorsMeeting: {}
            }
        },
        methods: {
            onPassMeetings(value) {
                console.log(value);
                this.meetingsSelected = value;
            },
            onPassErrors(value) {
                console.log('errors passed'); //never used
                this.errorsMeeting = value;
            }
        }
    }
</script>

在控制台中，我没有看到任何错误（422 Unprocessable Entity 除外）。奇怪的是第一个发射有效（failure），但第二个无效（passErrors）。在父函数onPassErrors 中，我放置了一个从未使用过的console.log，所以我认为该函数从未被调用。可以帮忙吗？

【问题讨论】：

你能指出第一个代码块是什么组件吗？

标签： laravel vue.js axios

【解决方案1】：

这可能是由事件名称不匹配引起的，在使用 DOM 内模板时可能会发生这种情况，因为 HTML 属性会自动小写（@passErrors 在 DOM 中变为 @passerrors）。

使用 Vue 的开发版本时，您会在浏览器的控制台中看到警告：

[Vue 提示]：事件“passerrors”在组件中发出，但处理程序注册为“passErrors”。请注意，HTML 属性不区分大小写，并且在使用 in-DOM 模板时不能使用 v-on 来监听 camelCase 事件。您可能应该使用“pass-errors”而不是“passErrors”。

这在单个文件组件 (demo 1) 或字符串模板 (demo 2) 中不是问题，但如果您必须坚持使用 in-DOM 模板，custom event names are recommended to be kebab-case：

<!-- Parent.vue -->
<MyComponent @pass-errors="onPassEvent" />

// MyComponent.vue
runReport() {
  this.$emit('pass-errors', /*...*/)
}

demo 3

【讨论】：