Vuetify时间选择器返回模型值

Question

我在我的项目中使用Vuetify时间选择器，但是在选择了一段时间之后，它似乎没有更新我的模型，我如何让它这样做呢？

这是我的组件，它使用的是时间选择器：

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>

这就是我如何将时间选择器添加到我的页面中，正如您所看到的，我正在使用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)" />

有用的链接： on components