1

I want to get an "input" event from a nested component that I see firing from the Vue chrome devtools extension enter image description here

I can only listen to the "input" event on the VDatePicker using the v-on directive. Is there a way to listen to the VDatePickerDateTable "input" event without extending the VDatePicker component?

<template>
    <v-date-picker v-model="selectedDays" multiple @input="onDayClick"/>
</template>

<script>
    export default {
        methods:{
            onDateClick(data){
                console.log(data); // ["2019-01-01", "2019-01-02", "2019-01-06"]
            }
        }
    }
</script>
izbz
  • 93
  • 10
  • Have you tried `this.$on("eventName", callback)`? https://vuejs.org/v2/api/#vm-on – Matt Jan 09 '19 at 15:42
  • That should work, see [this test](https://github.com/vuetifyjs/vuetify/blob/52c359939f91ccbd26c4b498f0ca8d2f20eef00b/packages/vuetify/test/unit/components/VDatePicker/VDatePicker.date.spec.js#L52) –  Jan 09 '19 at 16:10
  • This doesn't work it produces the same result. – izbz Jan 10 '19 at 09:06
  • @Matt and eric99 I think the reason your suggestion doesn't work is because of the **multiple** modifier which is new in [Vuetify 1.2](https://vuetifyjs.com/en/components/date-pickers) – izbz Jan 10 '19 at 09:59

1 Answers1

-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
  • 93
  • 10