Javascript VUEJ在自定义组件日期时间选择器上使用v-model

我希望在自定义日期时间组件上使用v-model，如下所示：

<date-time-picker v-model="startDate" label="Start date"></date-time-picker>

因此，我在DateTimePicker.vue中所做的是：

<template>
  <v-menu v-model="menu" :close-on-content-click="false" full-width max-width="290" transition="scale-transition">
    <!-- Text field -->
    <v-text-field slot="activator" :label="label" append-icon="date_range" solo
                  :value="formattedDate" @input="handleDateTime"></v-text-field>

    <!-- Date picker -->
    <v-date-picker v-model="selectedDate" locale="fr-fr" v-if="datePicker" :min="todayDate">
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="menu = false">Cancel</v-btn>
      <v-btn flat color="primary" @click="chooseDate">OK</v-btn>
    </v-date-picker>

    <!-- Time picker -->
    <v-time-picker v-if="!datePicker" v-model="selectedTime" full-width format="24hr" :min="todayTime">
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="menu = false">Cancel</v-btn>
      <v-btn flat color="primary" @click="chooseTime">OK</v-btn>
    </v-time-picker>
  </v-menu>
</template>

<script>
  import format from 'date-fns/format'

  export default {
    name: "DateTimePicker",
    props: ['label', 'value'],
    data() {
      const todayDate = new Date().toISOString().substr(0, 10);
      const todayTime = new Date().getHours() + ':' + new Date().getMinutes();

      return {
        dateValue: '',
        timeValue: '',
        todayDate,
        todayTime,
        selectedDate: todayDate,
        selectedTime: todayTime,
        datePicker: true,
        timePicker: false,
        menu: false
      }
    },
    methods: {
      // Triggered by clicking on OK button inside Datepicker
      chooseDate: function () {
        this.dateValue = this.selectedDate;
        this.datePicker = false;
      },
      // Triggered by clicking on OK button inside Timepicker
      chooseTime: function () {
        this.timeValue = this.selectedTime;
        this.menu = false;
      },
      handleDateTime: function () {
        this.$emit('input', this.formattedDate);
      }
    },
    computed: {
      // Format date
      formattedDate() {
        return this.dateValue && this.timeValue ? format(this.dateValue, 'DD/MM/YYYY') + ' at ' + this.timeValue : '';
      }
    },
    watch: {
      // Display date picker when the menu is closed
      menu: function (opened) {
        if (!opened) this.datePicker = true;
      }
    }
  }
</script>

<style scoped>

</style>

取消
好啊
取消
好啊
从“日期fns/格式”导入格式
导出默认值{
名称：“日期时间选择器”，
道具：['label'，'value']，
数据（）{
const todayDate=new Date（）.toISOString（）.substr（0,10）；
const todayTime=newdate（）.getHours（）+“：”+newdate（）.getMinutes（）；
返回{
日期值：“”，
时间值：“”，
今天，
今天,，
选定日期：今天日期，
所选时间：今天时间，
日期选择器：是的，
计时器选择器：错误，
菜单：错误
}
},
方法：{
//通过点击Datepicker内的OK按钮触发
choostate:函数（）{
this.dateValue=this.selectedDate；
this.datePicker=false；
},
//点击计时器内的OK按钮触发
chooseTime:函数（）{
this.timeValue=this.selectedTime；
this.menu=false；
},
handleDateTime:函数（）{
此.emit（'input'，此.formattedDate）；
}
},
计算：{
//格式日期
formattedDate（）{
返回this.dateValue&&this.timeValue？格式（this.dateValue，'DD/MM/yyyyy'）+'at'+this.timeValue:''；
}
},
观察：{
//关闭菜单时显示日期选择器
菜单：功能（已打开）{
如果（！opened）this.datePicker=true；
}
}
}

但是当我选择日期时，

@input

事件不会触发，因此不会调用

handleDateTime

。

---

我不明白怎么了，你能帮我吗？或者在我的组件上不可能使用v-model，我必须使用另一种方法？

您可以像以前一样保留父代码的代码：

<date-time-picker v-model="startDate" label="Start date"></date-time-picker>

---

你在使用Vuetify吗？@BoussadjraBrahim是的，为什么？我创建了Vuetify样板文件，请添加缺少的内容以便调试，谢谢。没关系，我们需要的东西都有了。那么stateDate v-model适用于您？好的，谢谢，所以在我的组件上不可能使用v-model？

   watch:{
       ....
     formattedDate(v) {
        this.$emit('input', this.formattedDate)
    }

   }