web-dev-qa-db-fra.com

Vue: quand utiliser @ keyup.native dans les éléments d'entrée

J'ai un composant Vue avec 

  1. un élément <input> qui lie la clé v-on:keyup.enter à doFilter()
  2. un <button> qui lie l'événement v-on:click à doFilter()
<input type="text" v-model="myVar" @keyup.enter="doFilter" />
<button @click="doFilter">Filter</button>

L'événement bouton déclenchera doFilter(), mais l'événement de touche active ne se déclenchera pas, sauf si j'ajoute le modificateur .native. 

<input type="text" v-model="myVar" @keyup.native.enter="doFilter" />

La documentation de Vue.js dit ceci à propos de.native:

écouter pour un événement natif sur l'élément racine du composant.

Quand dois-je utiliser .native et pourquoi l'événement keyup ne se déclenche-t-il pas?

Mise à jour 1: Ajouter codepen et code

Démo exécutable sur https://codepen.io/hanxue/pen/Zapmra

<div id="app">
  <md-toolbar>
    <h1 class="md-title" style="flex: 1">@keyup.native event</h1>
    <md-button class="md-icon-button">
      <md-icon>more_vert</md-icon>
    </md-button>
  </md-toolbar>

  <md-input-container>
      <label>@keyup.enter</label>
              <md-input type="text" @keyup.enter="doFilter" placeholder="@keyup.filter">
              </md-input>
          </md-input-container>

    <md-input-container>       
        <label>@keyup.native.enter</label>
              <md-input type="text" @keyup.native.enter="doFilter" placeholder="@keyup.native.filter">
              </md-input>
          </md-input-container>

    <md-input-container>       
              <button @click="doFilter" placeholder="@keyup.filter">
    @click  </button>
          </md-input-container>
</div>
<script>
Vue.use(VueMaterial)

var App = new Vue({
  el: '#app',
  methods: {
   doFilter: function() {
     alert('doFilter!')
   }
  },
})
</script>
javascriptvuejs2vue-component
5
Hanxue

Sur la base de vos commentaires, je suppose que vous utilisez le composant Vue Material libary et le composant <md-input> à la place d'un élément <input>.

Si vous écoutez l'événement keyup sans utiliser le modificateur .native (via <md-input @keyup.enter="doFilter">), votre composant attend que le composant <md-input> émette un événement personnalisé keyup.

Cependant, ce composant n'émet pas d'événement keyup , la méthode doFilter ne sera jamais appelée.

Comme indiqué dans la documentation , l'ajout du modificateur .native fait en sorte que le composant écoute un "événement natif sur l'élément racine" du composant <md-input>.

Ainsi, <md-input @keyup.native.enter="doFilter> écoutera l'événement DOM natif keyup de l'élément racine du composant <md-input> et appellera la méthode doFilter lorsque cet événement est déclenché à partir de l'élément racine. Enter clé.

6
thanksd

J'ai eu le même problème sur un composant d'affichage personnalisé sur lequel j'écoutais à la fois @select et @keyup.native.enter et que je recevais le message Enter touche deux fois parce que je ne faisais pas attention: onSelect émet un onKeyDown pour Enteret onkeyUp s'est allumé en second lieu.

Ma solution a consisté à écouter @keydown.native.enter afin que le cycle de clés @select ne soit plus gêné (ce qui est keydown -> keypresssed -> keyup).

0
andy