TypeError: this.$refs.fullscreen.toggle is not a function

[4n70w4]

Hi! I copy and compile example:

<template>
    <div id="app">
        <fullscreen ref="fullscreen" @change="fullscreenChange">
            Content
        </fullscreen>
        <!--  deprecated
          <fullscreen :fullscreen.sync="fullscreen">
            Content
          </fullscreen>
        -->
        <button type="button" @click="toggle" >Fullscreen</button>
    </div>
</template>
<script>
    import fullscreen from 'vue-fullscreen'
    import Vue from 'vue'
    Vue.use(fullscreen)
    export default {
        methods: {
            toggle () {
                this.$refs['fullscreen'].toggle() // recommended
                // this.fullscreen = !this.fullscreen // deprecated
            },
            fullscreenChange (fullscreen) {
                this.fullscreen = fullscreen
            }
        },
        data() {
            return {
                fullscreen: false
            }
        }
    }
    </script>

In browser:

But after click Fullscreen button nothing happened. In browser colsole I see error:

TypeError: this.$refs.fullscreen.toggle is not a function
    at a.toggle (Field:1)
    at It (vendor.js?id=8e2b892a6851ec634c14:1)
    at HTMLButtonElement.n (vendor.js?id=8e2b892a6851ec634c14:1)
    at HTMLButtonElement.Zr.o._wrapper (vendor.js?id=8e2b892a6851ec634c14:1)

[4n70w4]

The same problem with example:

<template>
  <div id="app">
    <div class="example">
      Content
    </div>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
import fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(fullscreen)
export default {
  methods: {
    toggle () {
      this.$fullscreen.toggle(this.$el.querySelector('.example'), {
        wrap: false,
        callback: this.fullscreenChange
      })
    },
    fullscreenChange (fullscreen) {
      this.fullscreen = fullscreen
    }
  },
  data() {
    return {
      fullscreen: false
    }
  }
}
</script>

[4n70w4]

And the same problem with «No conflict» example:

<template>
  <div id="app">
    <fs ref="fullscreen">
      Content
    </fs>
    <div class="example">
      Content
    </div>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
import Fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(Fullscreen, {name: 'fs'})
export default {
  methods: {
    toggle () {
      this.$refs['fullscreen'].toggle()
      this.$fs.toggle(this.$el.querySelector('.example'), {
        wrap: false,
        callback: this.fullscreenChange
      })
    },
    fullscreenChange (fullscreen) {
      this.fullscreen = fullscreen
    }
  },
  data() {
    return {
      fullscreen: false
    }
  }
}
</script>

[mirari]

I can't reproduce this problem. Try to paste your code on the online example?

https://codepen.io/mirari/pen/WJQqqR

[4n70w4]

My code is Field Component for Laravel Nova (https://nova.laravel.com/) I don't know how to copy it to https://codepen.io/

[mirari]

I have never used Laravel Nova. Maybe you need to debug the plugin installation process. Check Vue.prototype before and after Vue.use(Fullscreen), see if there is a value Vue.prototype.$fullscreen

[LeoHaoVIP]

Why not log the value of this.$refs['fullscreen'] and see what is wrong? I encountered the same problem in my vue project, the difference between our codes is that I used v-for loop to make several fullscreen lables (See the following codes).

After I log the value of this.$refs['fullscreen'], I found it's an array list. Trying invoking this.$refs['fullscreen'][index].toggle() helps me solve the problem.

[mirari]

Why not log the value of this.$refs['fullscreen'] and see what is wrong? I encountered the same problem in my vue project, the difference between our codes is that I used v-for loop to make several fullscreen lables (See the following codes).

After I log the value of this.$refs['fullscreen'], I found it's an array list. Trying invoking this.$refs['fullscreen'][index].toggle() helps me solve the problem.

This is mentioned in the doc for Vue.

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

https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements