CODEWITHSUNDEEP
vue.jsvuetify.js
Martyn Ball
Martyn Ball

Reputation: 4895

Vuetify timepicker return value to model

I'm using Vuetify timepicker within my project, however after selecting a time it doesn't appear to be updating my model, how can I get it to do this?

This is my component which is using the timepicker:

time-select.vue

<template>
    <v-layout row wrap>
        <v-flex>
            <v-menu
                    ref="menu"
                    v-model="menu2"
                    :close-on-content-click="false"
                    :nudge-right="40"
                    :return-value.sync="time"
                    lazy
                    transition="scale-transition"
                    offset-y
                    full-width
                    max-width="290px"
                    min-width="290px">
                <v-text-field
                        slot="activator"
                        v-model="time"
                        :label="this.label"
                        :name="this.name"
                        prepend-icon="access_time"
                        readonly></v-text-field>
                <v-time-picker
                        v-if="menu2"
                        v-model="time"
                        full-width
                        @click:minute="$refs.menu.save(time)"
                ></v-time-picker>
            </v-menu>
        </v-flex>
    </v-layout>
</template>
<script>
    export default {
        props: [ 'label', 'name', 'value' ],
        data () {
            return {
                time: this.value,
                menu2: false,
                modal2: false
            }
        }
    }
</script>

And this is how I'm adding the timepicker to my page, as you can see I'm using v-model so the value is updated. 

<time-select v-model="hours.open_time"
             name="businessHoursTimeFrom[]"
             label="Open Time"></time-select>

Upvotes: 2

Views: 4676

Answers (1)

Styx
Styx

Reputation: 10086

Don't forget that v-model="someVar" used with custom components is just a shortcut for:

:value="someVar" @input="someVar = $event"

Thus, this:

<time-select v-model="hours.open_time" />

Under the hood is:

<time-select :value="hours.open_time" @input="hours.open_time = $event" />

That means that your custom component should trigger input event itself.

Like this:

<v-time-picker
  v-if="menu2"
  :value="time"
  @input="$emit('input', $event)"
  full-width
  @click:minute="$refs.menu.save(time)" />

Useful link: Vue.js → Using v-model on components

Upvotes: 2

Related Questions