nuxt 上的 Vuetify 日期选择器问题

Posted 2023-02-22

【中文标题】nuxt 上的 Vuetify 日期选择器问题

【英文标题】：Vuetify Date picker issue on nuxt

【发布时间】：2021-11-09 12:07:01

【问题描述】：

我使用的日期选择器有点类似于 example

文件：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 上的显示文本不会反映所选日期。此外，在我从日期选择器中选择日期后，模型 project.start_date 似乎没有更新。当这样的事件错误没有出现在开发工具控制台上时，调试变得非常棘手。

【问题讨论】：

你自己说的，这里调试很麻烦。在 vue devtools 中检查状态呢？

啊！看起来模型中的选定状态确实没有更新。

【参考方案1】：

首先，不建议直接更改作为prop传入的模型。我们不希望父组件中出现任何不需要的中断。依靠events。不知何故，即使是通过 this style 对我来说也不是很好。

我做了一些这样的解决方法。 （我知道这是一种非常肮脏的方式）。但是由于某种原因，在父组件中无法检测到带有输入/更新/更改的 $emit。我很确定有更好的方法来做到这一点。但就目前而言，继续生活。 :-(

文件：datepicker.vue

<template>
...
<v-date-picker
      locale="en-in"
      v-model="dateValue"
      no-title
      @input="dateMenu = false;"
      @change="saveDate" //change here
    >
    </v-date-picker>
...
</template>
<script>
...
methods()
  saveDate(val)
    this.dateValue = val;
    //changed here...emitting a custom event. 
    $nuxt.$emit("datePicked",
          project_number:this.project_number, 
          selectedDate: selDateVal
          );
    this.$refs.dateMenu.save(selDateVal);      
  
...
</script>

文件：project-subform.vue

...
<script>
...
created:
 this.$nuxt.$on('datePicked',this.updateDate);

...
methods:
  updateDate(v)
    //do my stuff
    this.projects[v.project_number].startDate = v.selectedDate
  

</script>