0

この例に似た日付ピッカーを使用しています

ファイル: datepicker.vue

<template>
  <v-menu
    v-model="dateMenu"
    :close-on-content-click="false"
    :nudge-right="40"
    :return-value.sync="dateValue"
    transition="scale-transition"
    offset-y
  >
    <template v-slot:activator="{ on }">
      <v-text-field
        :label="dateLabel"
        prepend-icon="fa-calendar"
        readonly
        v-model="dateValue"
        v-on="on"
        clearable
      ></v-text-field>
    </template>
    <v-date-picker
      locale="en-in"
      v-model="dateValue"
      no-title
      @input="dateMenu = false"
    >
      <v-spacer></v-spacer>
      <v-btn 
        text 
        color="primary" 
        @click="dateMenu = false"
        >Cancel</v-btn>
      <v-btn 
        text 
        color="primary" 
        @click="$refs.dialog.save(dateValue)"
        >OK</v-btn> 
   
    </v-date-picker>
  </v-menu>
</template>
<script>
  export default {
    props: ['dateLabel','dateModel'],
    data() {
      return {
        dateMenu: false,
        dateValue: this.dateModel,
      };
    },
    watch: {
      dateValue(){
        $nuxt.$emit('update',this.dateValue);
      }
    },
  };
</script>

ファイル: projects-subform.vue

...
<DatePicker 
          dateLabel="Project Start Date" 
          :dateModel="project.start_date"
          @update="(v) => (project.start_date = v)"/>
...

(プロジェクトフォームから DatePicker をコンポーネントとしてエクスポートしました。)

ピッカー UI から日付を選択すると、v-text-field の表示テキストに選択した日付が反映されません。また、datepicker から日付を選択した後、モデル project.start_date が更新されないようです。このようなイベント エラーが開発ツール コンソールに表示されない場合、デバッグが非常に難しくなります。

変更されていない状態: 開発ツール

4

1 に答える 1