Séance 7 : Evénements et Formulaires

Cette partie est une traduction/adaptation de la documentation officielle située : https://fr.vuejs.org/guide/essentials/forms.html

Directive v-model

La directive v-model permet de lier un élément du DOM à une variable du composant. Cette variable doit être déclarée dans la partie script du composant et réactive (ref()). Exemple :

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

const message = ref('Hello Vue!')

v-model peut être utilisé sur des <input> de différents types, des éléments <textarea>, et <select>. Le v-model peut être considéré comme l'équivalent du value des champs de formulaire.

Différents types de champs

Un ensemble d'exemple est disponible directement sur la documentation :

• Champs Textes : https://vuejs.org/guide/essentials/forms.html#text

• Champs TextArea avec plusieurs lignes : https://vuejs.org/guide/essentials/forms.html#multiline-text

• Champs Checkbox unique ou en récupérant un tableau : https://vuejs.org/guide/essentials/forms.html#checkbox

• Champs radio : https://vuejs.org/guide/essentials/forms.html#radio

• Champs select (simple ou multiple) : https://vuejs.org/guide/essentials/forms.html#select

Modificateurs

Vue.js permet d'ajouter des modificateurs à la directive v-model pour modifier son comportement, et modifier le type de données récupéré. Par exemple, pour récupérer un nombre au lieu d'une chaîne de caractères, il suffit d'ajouter le modificateur number à la directive v-model.

.number

Si vous voulez que l'entrée de l'utilisateur soit automatiquement typée comme un nombre, vous pouvez ajouter le modificateur number à vos entrées gérées par v-model :

<input v-model.number="age" />

Si la valeur ne peut pas être analysée avec parseFloat(), alors la valeur originale est utilisée à la place.

Le modificateur number est appliqué automatiquement si l'entrée possède type="number".

.trim

Si vous voulez que les espaces blancs des entrées utilisateur soient automatiquement supprimés, vous pouvez ajouter le modificateur trim à vos entrées gérées par v-model :

<input v-model.trim="msg" />

Écouter des événements

Cette partie est une traduction/adaptation de la documentation officielle située : https://vuejs.org/guide/essentials/event-handling.html

Nous pouvons utiliser la directive v-on, qui peut se résumer par le symbole @, pour écouter les événements DOM et exécuter du JavaScript lorsqu'ils sont déclenchés. L'utilisation serait alors v-on:click="handler" ou avec le raccourci, @click="handler".

handler peut soit être du code JavaScript (on parle de gestionnaire en ligne ou inline handlers), soit une méthode définie dans la partie script (on parle de méthode gestionnaire ou method handler).

Gestionnaire en ligne

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

Avec la partie script :

const count = ref(0)

Pour rappel, ref() permet de rendre la propriété count réactive. Il faut ajouter l'import suivant :

import { ref } from 'vue'

Cette solution est pratique pour les interactions simples, mais elle ne permet pas de réutiliser le code. Pour cela, il faut utiliser une méthode gestionnaire.

Méthode gestionnaire

<!-- `greet` est le nom de la méthode définie dans la partie script -->
<button @click="greet">Greet</button>

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` est l'événement natif du DOM
  if (event) {
    alert(event.target.tagName)
  }
}

Notre bouton appelle ici une méthode nommée greet. Cette méthode est définie dans la partie script. Elle affiche une alerte avec le message "Hello Vue.js!". Elle prend, automatiquement, en paramètre un événement natif du DOM : la variable event en paramètre.

On peut grace à cet événement accéder à la cible de l'événement, ici le bouton, et afficher son nom de balise HTML, ou récupérer des valeurs des attributs, etc.

Il est possible de passer nos propres paramètres à une methode associée à un événément. Par exemple, si on veut passer le nom de la personne à saluer, on peut faire :

<button @click="greet('John')">Say Hello</button>

function greet(name) {
  alert(`Hello ${name}!`)
}

Si on souhaite à la fois passer nos paramètres et récupérer l'événement natif du DOM, on peut faire :

<button @click="greet('John', $event)">Say Hello</button>

function greet(name, event) {
  // ...
}

La notation $event est une syntaxe spéciale qui permet de passer l'événement natif du DOM en tant qu'argument à la méthode gestionnaire.

Il existe de nombreux événements (change, keyup, keydown, blur...) qui peuvent être écoutés et déclencher des actions.

Événement de touche

Il est possible d'utiliser les événements de touche pour écouter les événements clavier. Par exemple, si on veut écouter l'événement keyup sur un champ de saisie, on peut faire :

<input @keyup.enter="onEnter">

Ici, on écoute l'événement keyup sur le champ de saisie et on exécute la méthode onEnter lorsque la touche Enter est pressée.

Exercices

Exercice 1

On va modifier la page pays pour filtrer les pays en fonction de la saisie de l'utilisateur. Nous allons le faire dans un premier temps avec un champ input et un bouton qui déclenchera un événement pour filtrer.

Dans un second temps nous le ferons en temps réel, c'est à dire que dès que l'utilisateur tape quelque chose dans le champ de saisie, la liste des pays sera filtrée.

Étape 1

Dans le fichier src/views/Pays.vue, ajouter un champ de saisie (associé à la variable recherche) et un bouton qui déclenchera un événement pour filtrer (la méthode se nommera filtrer et sera déclenchée sur le click).

Étape 2

Dans la partie script, ajouter une variable recherche qui sera une chaîne de caractères vide.

Étape 3

Dans la partie script, ajouter une méthode filtrer qui va filtrer la liste des pays en fonction de la saisie de l'utilisateur. On pourrait faire un nouvel appel API pour récupérer les pays en fonction de la saisie de l'utilisateur, mais on va faire un filtre en JavaScript sur cette exercice. Pour cela, on va utiliser la méthode filter() de JavaScript. Cette méthode prend en paramètre une fonction qui sera appelée pour chaque élément du tableau (léquivalent de faire une boucle sur toutes les réponses et comparer les valeurs). Cette fonction prend en paramètre un élément du tableau et doit retourner un booléen. Si le booléen est true, l'élément est conservé dans le tableau, sinon il est supprimé.

• La méthode filter() retourne un nouveau tableau, elle ne modifie pas le tableau d'origine. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

• La méthode toLowerCase() permet de transformer une chaîne de caractères en minuscules. La comparaison est sensible à la casse, donc on va transformer les chaînes de caractères en minuscules pour comparer les valeurs. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase

• La méthode includes() permet de savoir si une chaîne de caractères est incluse dans une autre chaîne de caractères. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/includes

Étape 4

Si vous testez votre code à ce stade et que vous avez remplacé la variable data par les résultats, alors les filtres suivants ne fonctionne plus car nous avons écrasé notre liste d'origine. Pour résoudre ce problème, il faut créer une variable qui contiendra la liste d'origine des pays et une autre qui contiendra la liste des pays filtrés. On va donc créer une variable listeComplete qui contiendra la liste des pays d'origine et utiliser la variable data qui contiendra; la première tous les pays également, puis la liste des pays filtrés lors d'une recherche.

Exercice 2

Modifiez le code précédent pour que la recherche se fasse en temps réel, c'est à dire dès que l'utilisateur tape quelque chose dans le champ de saisie, la liste des pays sera filtrée.

Exercice 3

On va ajouter une vue Recherche.vue (et le menu qui va avec) qui va permettre de rechercher des pays en fonction de la saisie de l'utilisateur. Cette fois, comme aucune donnée n'est chargée dès le début, on va utiliser l'API https://restcountries.com/v3.1/name/.... pour récupérer les pays en fonction de la saisie de l'utilisateur. Il faut remplacer le ... par la saisie de l'utilisateur.