Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
    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?
                @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
                May 8, 2018 at 7:21
                @Traxo  1.0.17: `  "dependencies": {     "firebase": "^4.13.1",     "vue": "^2.5.2",     "vue-router": "^3.0.1",     "vuetify": "^1.0.17"   },`
– Tom
                May 8, 2018 at 13:54
@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.
                This almost fixed my issue!  I was having issues with the ref inside a v-for.  I would recommend amending it to:@click="$refs.dialog[index].save(time)"
– Zak Avery
                Sep 30, 2018 at 2:31
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)
$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)
                Sorry, that didn't work. [Vue warn]: Error in event handler for "click": "TypeError: this.$refs.dialog.save is not a function" Any ideas?
– Tom
                May 8, 2018 at 7:20
                Add the function call inside a $.nextTick(function () {this.$refs.dialog.save (time)}) because it seems that for some reason the reference is not created when you try to access it
– ricardoorellana
                May 8, 2018 at 13:58
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])
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.