Manejo de la tecla Enter en Vue.js

Estoy aprendiendo Vue.js. En mi Vue, tengo un campo de texto y un botón. De forma predeterminada, este botón envía un formulario cuando alguien presiona la tecla Intro en su teclado. Cuando alguien está escribiendo en el campo de texto, quiero capturar cada tecla presionada. Si la clave es un símbolo ‘@’, quiero hacer algo especial. Si la tecla presionada es la tecla “Enter”, también quiero hacer algo especial. Este último es el que me da desafíos. Actualmente, tengo este Violínque incluye este código:

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },

    postEmailAddress: function() {
      this.log += '\n\nPosting';
    }
});

En mi ejemplo, parece que no puedo presionar la tecla “Enter” sin enviar el formulario. Sin embargo, esperaría que la validateEmailAddress funcionar para al menos disparar primero para poder capturarlo. Pero, eso no parece estar sucediendo. ¿Qué estoy haciendo mal?

En vue 2, puede capturar el evento enter con v-on:keyup.enter revisa la documentación:

https://v2.vuejs.org/v2/guide/events.html#Key-Modifiers

dejo un muy simple ejemplo:

var vm = new Vue({
  el: '#app',
  data: {msg: ''},
  methods: {
    onEnter: function() {
       this.msg = 'on enter event';
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <input v-on:keyup.enter="onEnter" />
  <h1>{{ msg }}</h1>
</div>

Buena suerte

Modificadores de eventos

Puedes referirte a modificadores de eventos en vuejs para evitar el envío de formularios en enter llave.

Es una necesidad muy común llamar event.preventDefault() o event.stopPropagation() controladores de eventos internos.

Aunque podemos hacer esto fácilmente dentro de los métodos, sería mejor si los métodos pudieran ser puramente de lógica de datos en lugar de tener que lidiar con detalles de eventos DOM.

Para abordar este problema, Vue proporciona modificadores de eventos para v-on. Recuerde que los modificadores son sufijos de directiva indicados por un punto.

<form v-on:submit.prevent="<method>">
  ...
</form>

Como dice la documentación, esto es azúcar sintáctico para e.preventDefault() y detendrá el envío de formularios no deseados al presionar la tecla Intro.

Aquí es un violín de trabajo.

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },
    
    postEmailAddress: function() {
            this.log += '\n\nPosting';
    },
    noop () {
      // do nothing ?
    }
  }
})

html, body, #editor {
  margin: 0;
  height: 100%;
  color: #333;
}

<script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>
<div id="myApp" style="padding:2rem; background-color:#fff;">
<form v-on:submit.prevent="noop">
  <input type="text" v-model="emailAddress" v-on:keyup="validateEmailAddress" />
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>  
</form>
</div>

Este evento me funciona:

@keyup.enter.native="onEnter".

Para ingresar el manejo de eventos, puede usar

1. @keyup.enter o
2. @keyup.13

13 es el código clave de enter. Para el evento clave @, el código clave es 50. Entonces puede usar @keyup.50.

Por ejemplo:

<input @keyup.50="atPress()" />

Olvida un ‘}’ antes de la última línea (para cerrar los “métodos {…”).

Este código funciona:

Vue.config.keyCodes.atsign = 50;

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
  
    onEnterClick: function() {
    	alert('Enter was pressed');
    },
    
    onAtSignClick: function() {
    	alert('@ was pressed');
    },
    
    postEmailAddress: function() {
			this.log += '\n\nPosting';
    }
  }
})

html, body, #editor {
  margin: 0;
  height: 100%;
  color: #333;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="myApp" style="padding:2rem; background-color:#fff;">

  <input type="text" v-model="emailAddress" v-on:keyup.enter="onEnterClick" v-on:keyup.atsign="onAtSignClick" />
  
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>
</div>

También puede pasar eventos a componentes secundarios con algo como esto:

<CustomComponent
    @keyup.enter="handleKeyUp"
/>

…

<template>
    <div>
        <input
            type="text"
            v-on="$listeners"
        >
    </div>
</template>

<script>
export default {
    name: 'CustomComponent',

    mounted() {
        console.log('listeners', this.$listeners)
    },
}
</script>

Eso funciona bien si tiene un componente de paso y quiere que los oyentes vayan a un elemento específico.

le falta un corchete de cierre para los métodos

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },

    postEmailAddress: function() {
      this.log += '\n\nPosting';
    }
  }//add this closing bracket and everything is fine
});