Manuseio da chave Enter em Vue.js

Estou aprendendo Vue.js. No meu Vue, tenho um campo de texto e um botão. Por padrão, este botão envia um formulário quando alguém pressiona a tecla Enter no teclado. Quando alguém está digitando no campo de texto, desejo capturar cada tecla pressionada. Se a chave for um símbolo '@', quero fazer algo especial. Se a tecla pressionada é a tecla "Enter", também quero fazer algo especial. O último é quem me desafia. Atualmente, tenho este Fiddle , que inclui 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';
    }
});

No meu exemplo, não consigo pressionar a tecla "Enter" sem enviar o formulário. Ainda assim, eu esperaria que a validateEmailAddressfunção fosse acionada pelo menos primeiro para que eu pudesse capturá-la. Mas, isso não parece estar acontecendo. O que estou fazendo errado?

Modificadores de evento

Você pode consultar os modificadores de evento em vuejs para evitar o envio do formulário na entertecla.

É uma necessidade muito comum chamar event.preventDefault()ou event.stopPropagation()dentro de manipuladores de eventos.

Embora possamos fazer isso facilmente dentro dos métodos, seria melhor se os métodos pudessem ser puramente sobre lógica de dados, em vez de ter que lidar com detalhes de eventos DOM.

Para resolver este problema, o Vue fornece modificadores de eventos para v-on. Lembre-se de que os modificadores são postfixes de diretiva denotados por um ponto.

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

Como afirma a documentação, este é um açúcar sintático e.preventDefault()e interromperá o envio de formulário indesejado ao pressionar a tecla Enter.

Aqui está um violino funcionando.

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>

Na vue 2, você pode pegar o evento de entrada e v-on:keyup.enterverificar a documentação:

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

Deixo um exemplo muito simples :

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>

Boa sorte

Você esquece um '}' antes da última linha (para fechar os "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 funciona para mim:

@keyup.enter.native="onEnter".

Para entrar no tratamento de eventos, você pode usar

1. @keyup.enter ou
2. @keyup.13

13 é o código de acesso de enter. Para o evento de tecla @, o código é 50. Portanto, você pode usar @keyup.50.

Por exemplo:

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