VueJS использует v-модель в пользовательском компоненте выбора времени и даты - PullRequest
Новая
       42

VueJS использует v-модель в пользовательском компоненте выбора времени и даты

0 голосов
/ 21 января 2019

Я хочу использовать v-модель в моем пользовательском компоненте даты и времени, например: 

<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>

Но событие @input не запускается, когда я выбираю дату, поэтому handleDateTime никогда не вызывается. Я не понимаю, что не так, вы можете мне помочь? Или, может быть, невозможно использовать v-модель на моем компоненте, и я должен использовать другой способ?

1 Ответ

0 голосов
/ 21 января 2019

Вы сохраняете код родительского кода, как и вы: 

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

в дочернем компоненте добавьте наблюдатель для свойства formattedDate следующим образом: 

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

   }

full running code

...