web-dev-qa-db-fra.com

Manipulation de la touche 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 soumet 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 pressée. Si la clé est un symbole "@", je veux faire quelque chose de spécial. Si la touche appuyée est la touche "Entrée", je souhaite également faire quelque chose de spécial. Ce dernier est celui qui me donne des défis. Actuellement, j'ai ce Fiddle , qui inclut 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 que le formulaire ne soit envoyé. Cependant, je m'attendrais à ce que la fonction validateEmailAddress tire au moins d'abord pour pouvoir la capturer. Mais cela ne semble pas se produire. Qu'est-ce que je fais mal?

javascriptvue.js
22
user687554

Modificateurs d'événements

Vous pouvez vous référer à modificateurs d’événement in vuejs pour empêcher la soumission de formulaire sur la clé enter.

Il est très souvent nécessaire d'appeler event.preventDefault() ou event.stopPropagation() à l'intérieur des gestionnaires d'événements. 

Bien que nous puissions le faire facilement dans les méthodes, il serait préférable que ces méthodes concernent uniquement la logique des données plutôt que de traiter des détails d'événement DOM.

Pour résoudre ce problème, Vue fournit des modificateurs d’événement pour v-on. Rappelez-vous que les modificateurs sont des postfixes directives 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.

Ici est un violon qui travaille.

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>

22
Amresh Venugopal

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>

18
SLYcee

Dans la vue 2, vous pouvez intercepter un événement avec v-on:keyup.enter et consulter 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

18
fitorec

Cet événement me convient:

@ keyup.enter.native = "onEnter".

0
Nuno Ribeiro