Nuxt框架下Vuetify自定义DatePicker选中日期后未更新显示和绑定值问题

问题修复方案 #

核心问题点 #

• 子组件使用$nuxt.$emit触发全局事件，与父组件绑定在子组件标签上的@update监听器不匹配，导致父组件无法接收更新通知
• v-date-picker绑定了@input="dateMenu = false"，选中日期瞬间就关闭弹窗，预设的OK按钮逻辑完全不会触发，同时代码中$refs.dialog.save无对应节点，执行时静默失败
• 子组件仅在初始化时将dateModel赋值给内部状态，未监听父组件传入的dateModel后续变化，双向同步链路断裂

修复后代码 #

datepicker.vue

<template>
  <v-menu
    v-model="dateMenu"
    :close-on-content-click="false"
    :nudge-right="40"
    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="localDate"
      no-title
    >
      <v-spacer></v-spacer>
      <v-btn 
        text 
        color="primary" 
        @click="dateMenu = false"
        >Cancel</v-btn>
      <v-btn 
        text 
        color="primary" 
        @click="confirmDate"
        >OK</v-btn> 
   
    </v-date-picker>
  </v-menu>
</template>
<script>
  export default {
    props: ['dateLabel','dateModel'],
    data() {
      return {
        dateMenu: false,
        localDate: this.dateModel,
        dateValue: this.dateModel,
      };
    },
    watch: {
      dateModel(newVal) {
        this.localDate = newVal
        this.dateValue = newVal
      }
    },
    methods: {
      confirmDate() {
        this.dateValue = this.localDate
        this.$emit('update', this.dateValue)
        this.dateMenu = false
      }
    }
  };
</script>

projects-subform.vue （调用代码无需修改）

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

验证逻辑 #

修改后选中日期点击OK按钮，输入框显示内容将同步更新，父组件绑定的project.start_date值也会同步变更，无控制台报错。

内容的提问来源于stack exchange，提问作者Naveen Karnam