vue.js - Vuetify timepicker 将值返回给模型

Question

我在我的项目中使用 Vuetify timepicker，但是在选择时间后它似乎没有更新我的模型，我怎样才能让它做到这一点？

这是我使用时间选择器的组件:

时间选择.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>

这就是我将时间选择器添加到页面的方式，正如您所看到的，我正在使用 v-model 因此值会更新。

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

Answer 1

不要忘记，与自定义组件一起使用的 v-model="someVar" 只是以下功能的快捷方式:

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

因此，这个:

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

底层是:

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

这意味着您的自定义组件应该触发 input 事件本身。

像这样:

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

有用链接:Vue.js → Using v-model on components