For a while now, I've been grappling with an issue. I decided to create a custom component with a time picker in Vuetify. The Vue.js docs stated that for custom model components, you need to emit the input like this:
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
However, despite adding this code snippet, my model isn't updating as expected. An error message "TypeError: Cannot read property 'value' of undefined" pops up. I also attempted using "$emit('input', $event)", but that didn't work either. Here's 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 have implemented the component in this manner:
<TimePicker v-model="startTime" label="Start Time"></TimePicker>