vue-fullscreen
vue-fullscreen copied to clipboard
mirari
TypeError: this.$refs.fullscreen.toggle is not a function
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)
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>
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>
I can't reproduce this problem. Try to paste your code on the online example?
https://codepen.io/mirari/pen/WJQqqR
My code is Field Component for Laravel Nova (https://nova.laravel.com/) I don't know how to copy it to https://codepen.io/
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
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.
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.
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.