1. Eléments de formulaire

Présentation

Vue.js nous permet de connecter dynamiquement les champs de nos formulaires à des données de nos composants. Cela nous permet d’adapter en temps réel notre application aux saisies de nos utilisateurs.

Dans ce chapitre, nous allons voir comment connecter des données de notre composant à la liste déroulante qui nous permettra de trier nos chiens par nom ou par race, et la saisie de texte qui nous permettra d’effectuer des recherches par nom de chien.

Directive v-model

Dans un input

Nous allons commencer par ajouter un input à notre composant DogsGallery, comme nous le ferions en HTML :

<template>
  <div class="dogs-gallery">
    <div class="gallery-options">
        <input type="text" name="search" placeholder="Chercher un chien">
    <div>
    <div class="gallery">
      <DogCard 
        v-for="dog in dogsData"
        :key="dog.id" 
        :firstname="dog.name" 
        :breed="dog.breed" 
        :pictureUrl="dog.picture"/>
    </div>
  </div>
</template>

Pour le moment notre balise input n’a aucune répercussion sur notre application. Grâce à la directive v-model, il va nous être possible d’associer la valeur de notre input à une donnée de notre composant :

<template>
  <div class="dogs-gallery">
    <div class="gallery-options">
        <input type="text" v-model="search" placeholder="Chercher un chien">
    <div>
    ...
  </div>
</template>

<script>
export default {
  name: 'DogsGallery',
  data() {
    return {
      dogsData: [],
      search: ""
    }
  },
  ...
}
</script>

Désormais, dès que la valeur de notre input est modifiée, cela modifie automatiquement la valeur de notre donnée search. A l’inverse, si la valeur de notre donnée est modifiée d’une quelconque façon, cela modifiera la valeur affichée dans la balise input.

Dans une combobox

Nous allons maintenant ajouter une combobox, c’est à dire une liste déroulante, pour déterminer l’ordre dans lequel doivent être triés nos chiens. Une nouvelle fois, il suffit d’appliquer la directive v-model sur la balise select de notre combobox, pour la lier à une donnée :

<template>
  <div class="dogs-gallery">
    <div class="gallery-options">
        <input type="text" v-model="search" placeholder="Chercher un chien">
        <label for="dog-sort">Trier par : </label>
        <select v-model="dogsSortType" id="dog-sort">
          <option value="AZName">Noms de A à Z</option>
          <option value="ZAName">Noms de Z à A</option>
          <option value="AZBreed">Espèces de A à Z</option>
          <option value="ZABreed">Espèces de Z à A</option>
        </select>
    <div>
    ...
  </div>
</template>

<script>
export default {
  name: 'DogGallery',
  data() {
    return {
      dogsData: [],
      search: "",
      dogsSortType: "AZName"
    }
  },
  ...
}
</script>

Notre donnée dogsSortType adoptera la valeur de l’élément sélectionné dans la combobox. L’attribut nous permet également de spécifier la valeur par défaut que nous désirons : “AZName”.

Si jamais la donnée a une valeur qui ne fait pas partie des options de la combobox, alors elle passera dans un état où aucune valeur n’est sélectionnée.

TIP

💡 Les balises <option> de notre combobox présente un pattern répétitif. Il serait possible de les définir à l’aide d’une directive v-for en lui fournissant un contenu et une valeur pour chaque option. Vous trouverez un exemple de cet usage dans la documentation Vue.js.

Conclusion

Nous avons maintenant des éléments de formulaire liés à des données. Vous pouvez vous amuser à afficher le contenu des données et . Vous verrez que le contenu affiché change dès que vous modifiez les champs de formulaire.

Nous aimerions désormais aller un peu plus loin dans notre interface : il serait intéressant d’avoir un bouton nous permettant de vider notre champ de recherche d’un seul coup, sans avoir à supprimer manuellement tous les caractères. Nous verrons cela dans le prochain chapitre, autour de la notion d’évènement.

Aller plus loin

• Sur les éléments de formulaire : la documentation