2. Evénements

Présentation

Vue.js permet d’associer simplement différents évènements affectant nos balises à des méthodes de nos composants. Cela nous permet d’aisément contrôler les interactions de votre utilisateur avec l’application.

Dans ce chapitre, nous allons voir comment associer des méthodes à certains évènements dans notre partie template. Nous ferons un rappel des principaux évènements en Javascript. Enfin, nous implémenterons un évènement dans un bouton nous permettant de vider notre champ de recherche défini dans le chapitre précédent.

La directive v-on

La directive v-on s’emploie suivie du nom de l’évènement auquel on souhaite associer une action :

<template>
  <div>
    <button v-on:click="doStuff">My button</button>  
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    doStuff : function(event) {
      event.target.text = "My Button Clicked"
    }
  }
}
</script>

A chaque fois que l’utilisateur cliquera sur le button, la méthode doStuff sera exécutée. La méthode récupère automatiquement en argument un objet event, de façon similaire aux évènements natifs Javascript. Cet objet fournit des éléments contextuels sur l’évènement comme l’objet du DOM concerné, etc.

Ici, nous l’utilisons pour récupérer l’objet cliqué via target et ainsi modifier le texte présent dans le bouton.

TIP

👌 Il est possible de raccourcir la syntaxe de la directive v-on avec @ , ce qui donne dans notre cas : @click=”doStuff”

REMARQUE

👉 Notez qu’il est également possible de créer des évènements sur les composants enfants que vous créés, et pas uniquement sur les balises HTML natives.

Les principaux évènements

Voici un petit rappel des principaux évènements Javascript que vous pouvez utiliser avec la directive v-on :

• click : l’objet est cliqué
• dblclick : l’objet est double cliqué
• mouseenter : le curseur entre dans la zone de l’objet
• mouseleave : le curseur sort dans la zone de l’objet
• mouseover : le curseur est déplacé sur l’objet
• input : la valeur d’un objet <input>, <select> ou <textarea> est modifiée
• change : la valeur d’un objet <input>, <select> ou <textarea> est modifiée par l’utilisateur

Les fonctions inlines

Dans certains cas, vous pouvez souhaiter fournir à la méthode que vous appelez en callback de votre évènement des arguments supplémentaires. Vous pouvez dans ce cas les fournir dans la définition de votre directive, en argument de votre méthode. Dans ce cas, vous devrez également spécifier $event dans votre liste d’arguments pour indiquer l’emplacement de l’objet event que vous récupérez également dans votre méthode.

 <template>
  <div>
    <button v-on:click="doStuff('Clicked', $event)">My button</button>  
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    doStuff : function(word, event) {
      event.target.text = "My Button " + word
    }
  }
}
</script>

Les modificateurs

A la suite du type d’évènement que vous indiquez dans votre directive, il vous est possible de spécifier un ou plusieurs modificateurs (modifiers en anglais) ****qui vont venir préciser la façon dont doit être traité votre évènement :

<button v-on:click.stop="doStuff">My button</button>

Le modificateur stop , utilisé ici, bloque la propagation de l’évènement de clique au-delà du bouton. Les objets parents de notre balise ne recevront ainsi pas d’évènement si l’on clique sur ce bouton. Ce modificateur est l’équivalent de la commande event.stopPropagation() en Javascript.

Voici quelques modificateurs intéressants :

• stop : bloque la propagation de l’évènement (event.stopPropagation())
• prevent : empêche le comportement par défaut associé à l’évènement de se produire (event.preventDefault())

Vous pouvez retrouver la liste complète des modificateurs dans la documentation de la directive v-on.

Conclusion

Nous savons maintenant comment gérer des évènements en Vue.js. Nous pouvons donc créer un bouton qui se chargera, au clic, de vider notre champ de recherche :

<template>
  <div class="dogs-gallery">
    <div class="gallery-options">
      <input type="text" v-model="search" placeholder="Chercher un chien">
      <button v-if="search" @click="cleanSearch">X</button>
      ...
    <div>
    ...
  </div>
</template>

<script>
export default {
  name: 'DogsGallery',
  data() {
    return {
      dogsData: [],
      search: "",
      dogsSortType: "AZName"
    }
  },
  methods: {
    ...,
    cleanSearch: function() {
      this.search = ""
    }  
  }
}
</script>

La directive v-if nous permet très simplement de ne pas afficher le bouton si notre donnée search est déjà vide.

Nous avons maintenant une interface très complète, mais il nous manque une pièce essentielle : pour le moment nos chiens ne sont ni filtrés, ni rangés en fonction des choix de l’utilisateur. Pour effectuer cela au mieux nous allons voir dans le prochain chapitre comment dynamiquement calculer une donnée en fonction de la valeur d’autres données grâce au données calculées.

Aller plus loin

• Sur les évènements :
  • la documentation