[FIXED] How to pass an object from axios catch block to parent component with Vue.js

Issue

I am using Laravel 7 and Vue.js 2.

I want to pass an object of validation errors from the catch block of an axios call to a parent component but for some reasons it doesn't work.

This is the code of the axios call:

        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');
            });
        }

This is the code in the parent component:

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

In the console I visualize no errors (except an 422 Unprocessable Entity). The strange thing is that the first emit works (failure), but the second one doesn't work (passErrors). In the parent function onPassErrors I put a console.log that is never used so I suppose that the function is never called. Can help?

Solution

This is likely caused by an event name mismatch, which can occur when using in-DOM templates because HTML attributes are automatically lower-cased (@passErrors becomes @passerrors in the DOM).

When using the development build of Vue, you'd see a warning in the browser's console:

[Vue tip]: Event "passerrors" is emitted in component but the handler is registered for "passErrors". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "pass-errors" instead of "passErrors".

This is not a problem in single file components (demo 1) or string templates (demo 2), but if you must stick with in-DOM templates, custom event names are recommended to be kebab-case:

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

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

demo 3

Answered By - tony19

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)