Hola, estoy buscando una forma de crear un oyente en vue de esta manera:
document.addEventListener('keydown', function(event){ if(event.key === "Escape"){ console.log('hello esc '); } });Necesito cambiar el valor de "varr" en
data(){ return{ varr: value } }en cualquier momento cuando el usuario presione esc btn. Pero podría usarse en otros casos. Por favor ayuda.
Puede usar el oyente con el modificador @keyup.esc :
const app = Vue.createApp({ data() { return { varr: false } }, methods: { handleEsc() { console.log('hello esc ') this.varr = !this.varr } }, mounted() { this.$refs.div.focus() } }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo" > <div @keyup.esc="handleEsc" tabindex="0" ref="div"> <p>press esc</p> <p>varr: {{ varr }}</p> </div> </div>Sin conocer el alcance de su modelo/componente de Vue, la sugerencia más sencilla sería usar .mounted() en su modelo de Vue de nivel superior...
API de opciones de Vue 2/Vue 3
// index.js // in this example, the event handler is a Vue method const vueModel = new Vue( { … methods:{ … onKeydown( event ) { if(event.key === "Escape"){ console.log('hello esc '); this.varr = "new value"; } }, … }, mounted() { document.addEventListener( "keydown", this.onKeydown ); }, … } ); NOTA: Esto sería diferente si está utilizando la API de composición de Vue 3. En ese caso, le gustaría configurar su oyente en el gancho setup() o onMounted() , dependiendo de lo que afecte su controlador de eventos y/o dónde defina el método del controlador.