Manejo de la clave 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 Fiddle , que 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 que envíe el formulario. Sin embargo, esperaría que la validateEmailAddressfunción al menos se active primero para poder capturarla. Pero eso no parece estar sucediendo. ¿Qué estoy haciendo mal?

Modificadores de eventos

Puede consultar los modificadores de eventos en vuejs para evitar el envío de formularios en la enterclave.

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

Aunque podemos hacer esto fácilmente dentro de los métodos, sería mejor si los métodos pudieran ser puramente sobre 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 e.preventDefault()y detendrá el envío de formularios no deseados al presionar la tecla Intro.

Aquí hay un violín que funciona.

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/[email protected]/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>

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

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

Os dejo un ejemplo muy sencillo :

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

Buena suerte

Olvidas 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>

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 para ingresar. Para @ evento clave, el código clave es 50. Así que puede usar@keyup.50 .

Por ejemplo:

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