Estoy tratando de crear una aplicación simple en la que puedas usar las teclas de flecha para hacer ciertas cosas. Y tratando de que la parte delantera reaccione adecuadamente. Pero hasta ahora, no he podido actualizar los datos dentro de x-data.

flujo sencillo

• Pulse la tecla de flecha hacia arriba
• keyDownHandler activado
• upPressed establecido en verdadero
• Tecla de flecha hacia arriba liberada
• keyUpHandler activado
• upPressed se establece en falso de nuevo.

Pero esto no funciona ya que el controlador de eventos no puede configurar this.upPressed desde donde está registrado.

¿Algunas ideas?

HTML

 <div x-data="loadComponent()" x-init="init"> Right: <span x-text="rightPressed"></span><br> Left: <span x-text="leftPressed"></span><br> Up: <span x-text="upPressed"></span><br> Down: <span x-text="downPressed"></span> </div>

JavaScript

 function loadComponent() { return { rightPressed: false, leftPressed: false, upPressed: false, downPressed: false, init: function() { document.addEventListener("keydown", this.keyDownHandler, false) document.addEventListener("keyup", this.keyUpHandler, false) }, keyUpHandler(e) { console.log(e.key) //loggin the key up event if(e.key == "Right" || e.key == "ArrowRight") { this.rightPressed = false } else if(e.key == "Left" || e.key == "ArrowLeft") { this.leftPressed = false } else if (e.key == "Up" || e.key == "ArrowUp") { this.upPressed = false } else if (e.key == "Down" || e.key == "ArrowDown") { this.downPressed = false } }, keyDownHandler(e) { console.log(e.key) // login the key down event if(e.key == "Right" || e.key == "ArrowRight") { this.rightPressed = true } else if(e.key == "Left" || e.key == "ArrowLeft") { this.leftPressed = true } else if (e.key == "Up" || e.key == "ArrowUp") { this.upPressed = true } else if (e.key == "Down" || e.key == "ArrowDown") { this.downPressed = true } }, } }