この例に似た日付ピッカーを使用しています
ファイル: 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 が更新されないようです。このようなイベント エラーが開発ツール コンソールに表示されない場合、デバッグが非常に難しくなります。