[Vuejs]-"TypeError: _vm.$refs.dialog.save is not a function" in VuetifyJS

@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])