Utiliser des formulaires

  • 5 minutes

Les données retournées par la fonction data() dans une application ou un composant Vue sont génériquement désignées comme un état. Un état correspond à toutes les informations que votre application a besoin de suivre pour effectuer les opérations nécessaires. Les utilisateurs modifient généralement un état par le biais de formulaires HTML. Vue.js vous permet de lier des données à un formulaire afin que les utilisateurs puissent mettre à jour l’état.

Directive v-model

La directive v-model crée une liaison bidirectionnelle entre un contrôle HTML et les données associées. Ainsi, chaque fois que la valeur est mise à jour dans le formulaire, elle l’est aussi à l’intérieur de l’état de votre application. La directive v-model prend en charge la liaison à tous les contrôles de formulaire, notamment les cases à cocher, les zones de texte et les listes déroulantes.

Notes

La directive v-bind crée une liaison unidirectionnelle. Ainsi, toute modification apportée par l’utilisateur dans le formulaire n’est pas stockée dans l’état.

Pour tous les exemples cités dans cette unité, vous allez utiliser l’application Vue suivante.

Vue.createApp({
    data() {
        return {
            name: 'Cheryl',
            status: -1,
            active: true,
            benefitsSelected: 'yes',
            statusList: [
                'full-time',
                'part-time',
                'contractor'
            ]
        }
    }
})

Liaison à des zones de texte

Pour effectuer une liaison à une zone de texte, vous utilisez la directive v-model.

<input type="text" v-model="name" />

La propriété name est mise à jour chaque fois que la valeur de la zone de texte change. Si vous voulez plutôt utiliser textarea, la syntaxe est la même ; vous utilisez v-model="name" comme avant.

Liaison à des cases à cocher

En règle générale, les valeurs booléennes sont liées à des cases à cocher. Celles-ci permettent en effet d’activer ou de désactiver l’option. Pour lier l’option active, vous pouvez utiliser v-model comme vous l’avez fait précédemment.

<input type="checkbox" v-model="active" /> Is active

Parfois, la case à cocher ne correspond pas à une valeur booléenne. Elle vous offre plutôt deux options, comme Oui et Non. Dans ce cas, vous pouvez utiliser true-value et false-value pour indiquer la valeur associée quand la case est cochée (true) ou décochée (false).

<input type="checkbox" v-model="benefitsSelected" true-value="yes" false-value="no"> Benefits selected: {{ benefitsSelected }}

En langage HTML, vous créez des listes déroulantes en deux parties. Vous utilisez select pour créer la liste et option pour ajouter des options. La balise select stocke la valeur sélectionnée dans la liste déroulante, donc vous pouvez l’utiliser pour effectuer une liaison à votre modèle.

Dans Vue, vous devez effectuer les étapes suivantes :

  • Créez la liste des options. Pour créer la liste des éléments option, utilisez v-for pour parcourir en boucle et créer un élément option pour chaque élément inclus dans le tableau.

  • Identifiez la valeur. Pour chaque option que vous créez, vous avez besoin d’identifier la valeur. Si votre liste consiste simplement en un tableau de chaînes, par exemple, vous devez stocker la chaîne ou l’index sélectionné en tant que valeur. Voici un exemple :

    <select v-model="selectedIndex">
   <option v-for="(stringItem, index) in arrayOfStrings" :value="index"> 
   {{}}
   </option>
</select>

    Si votre liste stocke un tableau d’objets, indiquez la propriété d’affichage et l’emplacement où trouver la valeur.

    <select v-model="selectedValue">
   <option v-for="item in items" :value="item.value">
   {{ item.displayProperty }}
   </option>
</select>

  • Effectuez le suivi de la valeur sélectionnée. Vous pouvez lier la valeur sélectionnée à la balise select en utilisant v-model. Ici, vous pouvez effectuer le suivi soit de l’index, soit de la valeur de l’élément. À vous de voir.

Pour créer la liste des options, utilisez v-for pour parcourir la liste en boucle. Ensuite, choisissez de définir la valeur en tant qu’index de l’élément dans le tableau. Vous utilisez v-for(status, index) in statusList pour fournir l’index de chaque élément. Vous définissez ensuite la valeur (:value) de chaque option sur index, puis vous affichez status en tant qu’option pour l’utilisateur.

<select v-model="statusIndex">
    <!-- Create a message to select one -->
    <option disabled value="">Please select one</option>
    <!-- Use v-for to create the list of options -->
    <option v-for="(status, index) in statusList" :value="index">
        {{ status }}
    </option>
</select>

Enfin, vous ajoutez v-model="statusIndex" pour veiller à ce que, quand un utilisateur sélectionne un élément, la valeur de la propriétés de données statusIndex soit mise à jour vers l’index sélectionné.