Incorporating the requestPointerLock() method within a Vue.js component has posed some challenges for me. In the scenario where the pointerShouldLock data property of my component is set to true, I intend for the pointer to be locked during the beforeUpdate() lifecycle hook. Here's a snapshot of my code:
beforeUpdate() {
if (this.pointerShouldLock) {
const gameScreen = document.getElementById('game-screen')
requestPointerLock(gameScreen)
}
}
The function requestPointerLock() is structured as follows:
requestPointerLock = element => {
element.requestPointerLock =
element.requestPointerLock || element.mozRequestPointerLock
element.requestPointerLock()
}
While this approach functions seamlessly with React or vanilla JS implementations, Vue.js seems to present an obstacle. Instead of the expected pointer lock, a pointerlockerror event is triggered.
I have also experimented with utilizing the updated() lifecycle hook, but unfortunately, it didn't yield the desired outcome.
If anyone can shed light on why initiating a successful pointer lock request from within a Vue.js component seems unattainable, your insights would be greatly appreciated.