CODEWITHSUNDEEP
javascripteventsvue.jsvue-component
KeironLowe
KeironLowe

Reputation: 731

Vue.js, parent not responding to child event

I've got an issue where a parent component isn't responding to a child's event. Using the Vue Developer Tools, I can see that the events_loading event is being emitted by the <Calendar> component, but the parent just isn't responding.

The parent HTML is...

<div class="appContainer" v-on:events_loaded="test" v-bind:class="{ 'appContainer--isLoading':is_loading }">
    <app-header></app-header>
    <div class="appView" id="js-appView">
        <aside class="appAside">
            <date-picker></date-picker>
        </aside>
        <main class="appMain">
            <calendar></calendar>
        </main>
    </div>
</div>

And the JS is...

export default {
    name: 'app',
    methods: {
        test: function() {
            alert('sdfds');
        }
    },
    data: function() {
        return {
            is_loading: false
        }
    },
    components: {
        'app-header': AppHeader,
        'date-picker': DatePicker,
        'calendar': Calendar
    }
}

Upvotes: 0

Views: 281

Answers (1)

CodinCat
CodinCat

Reputation: 15914

You want to listen the event from the calendar, so you should write the v-on on the calendar component:

<calendar v-on:events_loaded="test"></calendar>

not on your parent component's container.

Upvotes: 3

Related Questions