Vuetify custom time picker component not updating model and giving error

2
votes

So I've been stuck on this for some time now. I created a custom component with the time picker in Vuetify. I saw in the Vue.js docs for custom model components you need to emit the input like so:

    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >

But even after adding this in, it doesn't seem to be updating my model. I am getting the error TypeError: Cannot read property 'value' of undefined. I tried $emit('input', $event) which also didn't seem to work. Here is my component:

TimePicker.vue

<template>
  <div>
    <v-dialog
      ref="dialog"
      v-model="modal2"
      :return-value.sync="time"
      persistent
      full-width
      width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          v-model="time"
          :label="label"
          y
          readonly
          prepend-icon="far fa-clock"
          v-on="on"
        ></v-text-field>
      </template>
      <v-time-picker
        v-if="modal2"
        :value="time"
        @input="$emit('input', $event.target.value)"
        full-width
      >
        <v-spacer></v-spacer>
        <v-btn flat color="primary" @click="modal2 = false">Cancel</v-btn>
        <v-btn flat color="primary" @click="$refs.dialog.save(time)">OK</v-btn>
      </v-time-picker>
    </v-dialog>
  </div>
</template>

<script>
export default {
  name: 'TimePicker',
  props: ['value', 'label'],
  data() {
    return {
      time: this.value,
      modal2: false
    };
  }
};
</script>

I am using the component like this:

<TimePicker v-model="startTime" label="Start Time"></TimePicker>
1
javascriptvue.jsvuejs2vue-componentvuetify.js

1 Answers

2
votes

Can you try emitting event as below:

<input
    v-bind:value="value"
    v-on:input="onInput"
>

methods: {
  onInput(value) {
    this.$emit('input', value)
  }
}