[Vuejs]-Vuetify Brithday Picker not working. Error: Property or method "on" is not defined on the instance but referenced during render

by

0👍

Taken and modified from vuetify example: 

<v-menu
  ref="menu"
  v-model="menu"
  :close-on-content-click="false"
  :return-value.sync="date"
  transition="scale-transition"
  offset-y
  min-width="290px"

  <template v-slot:activator="{ on }">
    <v-text-field
      v-model="date"
      label="Birthday Picker"
      prepend-icon="event"
      readonly
      v-on="on"
    ></v-text-field>
  </template>
  <v-date-picker v-model="date" @change="$refs.menu.save(date)" no-title scrollable>
  </v-date-picker>
</v-menu>

Shouldn’t have removed the :return-value.sync="date" or this.$refs.menu.save() doesn’t do anything. I’m not sure how this would trigger ‘on is not defined on this instance’ error, trying to replicate.

0👍

I have encountered the same error with v-menu in Vuetify.
What I did is just add on in data as following:

...

<script>
  export default {
    data: () => ({
      on: undefined
    }),
    ...
  }
</script>

Leave a comment