[Vuejs]-How to listen to a nested components' events in Vue

by

-1👍

This is what I ended up doing. Using a ref to VDatePicker and following it into a nested ref of its child, VDatePickerDateTable to listen to its “input” event. The reason I think that the input on VDatePicker passes an array of date strings is because it is a multi date picker as defined by the multiple attribute on the component. This was added in Vuetify 1.2.

It now passes the date clicked to the handler. I would love to know if anyone has a better way.

<template>
    <v-date-picker ref="datePicker" v-model="selectedDays" multiple/>
</template>

<script>
export default {
    mounted(){
            this.$refs.datePicker.$refs.table.$on('input', this.onDayClick);
    },
    methods: {
        onDateClick(data) {
            console.log(data); // "2019-01-01"
        }
    }
};
</script>
👤izbz

Leave a comment