Browser security rejecton: Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

How to reproduce:

vue init webpack fullscreen-test
cd fullscreen-test
npm install --save vue-fullscreen
npm run dev

Edit ./src/components/HelloWorld.vue

<template>
  <div class="hello">
    <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 {
  name: 'HelloWorld',
  methods: {
    toggle () {
      this.fullscreen = !this.fullscreen
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      fullscreen: false
    }
  }
}
</script>

Research:

// Not working through vue-fullscreen recommended method
<button type="button" @click="toggle" >vue-fullscreen</button>

// Works with direct-called plain mozilla fulscreen-request
<button type="button" onclick="body.mozRequestFullScreen()" >onclick fullscreen</button>

// Works with plain mozilla fulscreen-request called from vuejs method
<button type="button" @click="full" >vue-method fullscreen</button>

methods: {
  toggle () {
    this.fullscreen = !this.fullscreen
  },
  full () {
    document.body.mozRequestFullScreen()
  }
}

Tested in Chrome, Fireox

[mirari]

Yes, I will update it later.

[mirari]

@BartlomiejSkwira Since the prop watcher can not be a sync action now, the browser will intercept the subsequent operation of the callback.Change the fullscreen variable or trigger from it will not work. You have to excute the toggle method directly from a click callback or the chain of it now.