I'm using VueJS with VuetifyJS and I get this error as soon as I try to save the time by clicking the OK button:

[Vue warn]: Error in event handler for "click": "TypeError: _vm.$refs.dialog.save is not a function"

I didn't change the code - just used the original code from the VuetifyJS example:

 <v-flex xs11 sm5>
  <v-dialog
    ref="dialog"
    v-model="modal2"
    :return-value.sync="time"
    persistent
    lazy
    full-width
    width="290px"
  >
    <v-text-field
      slot="activator"
      v-model="time"
      label="Picker in dialog"
      prepend-icon="access_time"
      readonly
    ></v-text-field>
    <v-time-picker v-model="time" actions>
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="modal2 = false">Cancel</v-btn>
      <v-btn flat color="primary" @click="$refs.dialog.save(time)">OK</v-btn>
    </v-time-picker>
  </v-dialog>
</v-flex>

<script>
  export default {
    data () {
      return {
        time: null,
        menu2: false,
        modal2: false
      }
    }
  }
</script>

Also as soon as the picker appears the website behind it is not visible anymore - there should just be a black overlay on it.

I tried to update NodeJS and all dependencies to the latest version but it didn't help. Where does this error come from? Any ideas welcome.

UPDATE: I put the same unchanged code from the Vuetify example in App.vue and it worked but it still doesn't in HelloWorld.vue - any ideas?

I'm using VueJS with VuetifyJS and I get this error as soon as I try to save the time by clicking the OK button:

[Vue warn]: Error in event handler for "click": "TypeError: _vm.$refs.dialog.save is not a function"

I didn't change the code - just used the original code from the VuetifyJS example:

 <v-flex xs11 sm5>
  <v-dialog
    ref="dialog"
    v-model="modal2"
    :return-value.sync="time"
    persistent
    lazy
    full-width
    width="290px"
  >
    <v-text-field
      slot="activator"
      v-model="time"
      label="Picker in dialog"
      prepend-icon="access_time"
      readonly
    ></v-text-field>
    <v-time-picker v-model="time" actions>
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="modal2 = false">Cancel</v-btn>
      <v-btn flat color="primary" @click="$refs.dialog.save(time)">OK</v-btn>
    </v-time-picker>
  </v-dialog>
</v-flex>

<script>
  export default {
    data () {
      return {
        time: null,
        menu2: false,
        modal2: false
      }
    }
  }
</script>

Also as soon as the picker appears the website behind it is not visible anymore - there should just be a black overlay on it.

I tried to update NodeJS and all dependencies to the latest version but it didn't help. Where does this error come from? Any ideas welcome.

UPDATE: I put the same unchanged code from the Vuetify example in App.vue and it worked but it still doesn't in HelloWorld.vue - any ideas?

• javascript
• vue.js
• vuetify.js

• Where is the save method defined? – Bert Commented May 7, 2018 at 17:13
• @Sphinx Can you please explain why a different v-model name should fix the issue? I tried it but got this error [Vue warn]: Error in event handler for "click": "TypeError: this.$refs.dialog.save is not a function" – Tom Commented May 8, 2018 at 7:21
• What's your vuetify version? – Traxo Commented May 8, 2018 at 12:33
• @Traxo 1.0.17: ` "dependencies": { "firebase": "^4.13.1", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuetify": "^1.0.17" },` – Tom Commented May 8, 2018 at 13:54

5 Answers 5

@Tom, i am not sure still you face this issue.

In case the dialog is inside "v-for", you need to follow bellow approach.

From Vue docs:

When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source.

You need to use @click="$refs.dialog[index - 1].save(time)" instead.

I have this kind of error also, I did console.log the this.$ref.dialog and I found out it was an array, so I revise my code into this.$refs.dialog[0].save().

methods: {
    save(time) {
      this.$refs.dialog[0].save(time)
    }
  }

From official docs:

$refs are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties.

So what you need to do is create a method handler instead.

<v-btn flat color="primary" @click="save(time)">OK</v-btn>

And in your javascript the save function call using the child reference with ref property, something like this:

export default {
  data() {
    return {
      time: null,
      menu2: false,
      modal2: false
    }
  },
  methods: {
    save(time) {
      this.$refs.dialog.save(time)
    }
  }
}

I had the same problem when I copied from vutify. I copied the element twice so the two elements had the same ref where I tried to fire the save function from both refs => conflict => so please check the refs if you have my problem.

for example: if you have the first => ref="dialog" then make the second => ref="dialog2"

If you copied from vuetify you most probably have this line in there as well: :return-value.sync="execution_date" For me it worked to remove this line (together with the change dialog[0])