Gestion de la clé d'entrée dans Vue.js

J'apprends Vue.js. Dans ma Vue, j'ai un champ de texte et un bouton. Par défaut, ce bouton envoie un formulaire lorsque quelqu'un appuie sur la touche Entrée de son clavier. Quand quelqu'un tape dans le champ de texte, je veux capturer chaque touche enfoncée. Si la clé est un symbole «@», je veux faire quelque chose de spécial. Si la touche enfoncée est la touche "Entrée", je souhaite également faire quelque chose de spécial. C'est ce dernier qui me donne des défis. Actuellement, j'ai ce Fiddle , qui comprend ce code:

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';
    }
});

Dans mon exemple, je n'arrive pas à appuyer sur la touche "Entrée" sans avoir soumis le formulaire. Pourtant, je m'attendrais à ce que la validateEmailAddressfonction démarre au moins pour pouvoir la capturer. Mais cela ne semble pas se produire. Qu'est-ce que je fais mal?

Modificateurs d'événements

Vous pouvez vous référer aux modificateurs d'événements dans vuejs pour empêcher la soumission de formulaire sur la enterclé.

C'est un besoin très courant d'appeler event.preventDefault()ou à l' event.stopPropagation()intérieur de gestionnaires d'événements.

Bien que nous puissions le faire facilement à l'intérieur des méthodes, il serait préférable que les méthodes ne concernent que la logique des données plutôt que d'avoir à gérer les détails des événements DOM.

Pour résoudre ce problème, Vue fournit des modificateurs d'événements pour v-on. Rappelez-vous que les modificateurs sont des postfixes de directive désignés par un point.

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

Comme l'indique la documentation, il s'agit d'un sucre syntaxique pour e.preventDefault()et arrêtera la soumission de formulaire indésirable en appuyant sur la touche Entrée.

Voici un violon qui fonctionne.

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, vous pouvez attraper un événement d'entrée en v-on:keyup.enterconsultant la documentation:

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

Je laisse un exemple très simple :

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>

Bonne chance

Vous oubliez un '}' avant la dernière ligne (pour fermer les "méthodes {...").

Ce code fonctionne:

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>

Cet événement fonctionne pour moi:

@keyup.enter.native="onEnter".

Pour entrer la gestion des événements, vous pouvez utiliser

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

13 est le code clé d'entrée. Pour l'événement @ key, le code clé est 50. Vous pouvez donc utiliser @keyup.50.

Par exemple:

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