Vuetify Date picker issue on nuxt

Question

I am using a date picker somewhat similar to this example

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

File: projects-subform.vue

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

(I exported DatePicker as a component from the projects form. )

When I select the date from picker UI, the display text on the v-text-field does not reflect the selected date. Also, the model project.start_date does not seem to update after I select the date from my datepicker. It becomes very tricky to debug when event errors like this don't show up on the dev tools console.

Answer 1

First of all, it is not recommended to change the model passed in as a prop directly. We don't want any unwanted breaks in the parent component. Rely on events. Somehow even this style of passing also didn't work quite well for me.

I did some workaround like this. (I know it is a very dirty way). But for some reason $emit with input/update/change just fails to be detected in the parent component. I am very sure there's a better way of doing this. But for now, moving on with life. :-(

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

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