时间戳

首页 > 解决方案 > Vuetify 自定义时间选择器组件不更新模型并给出错误

javascript - Vuetify 自定义时间选择器组件不更新模型并给出错误

问题描述

所以我已经坚持了一段时间了。我在 Vuetify 中使用时间选择器创建了一个自定义组件。我在 Vue.js 文档中看到了您需要像这样发出输入的自定义模型组件：

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

但即使添加了这个，它似乎也没有更新我的模型。我收到错误 TypeError：无法读取未定义的属性“值”。我尝试了 $emit('input', $event) 似乎也没有用。这是我的组件：

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

我正在使用这样的组件：

<TimePicker v-model="startTime" label="Start Time"></TimePicker>

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

您可以尝试如下发出事件：

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

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

推荐阅读