Exercice : Lier des données à des formulaires

Effectué

Ici, vous allez mettre à jour une application fictive qui permet aux utilisateurs de réserver des croisières dans l’espace. Vous allez ajouter un formulaire pour permettre à un voyageur de réserver son trajet pour la Lune.

Cloner le dépôt de démarrage et explorer le code

Ce module est associé à un dépôt de démarrage. Celui-ci vous permet de vous concentrer uniquement sur les concepts de ce module.

Vous allez avoir besoin d’installer Git et Visual Studio Code. Dans Visual Studio Code, vous aurez besoin de l’extension Live Server.

Clonez le dépôt de démarrage et ouvrez le dossier dans Visual Studio Code en exécutant le code suivant.

git clone https://github.com/MicrosoftDocs/mslearn-vue-data-events
cd mslearn-vue-data-events/starter
code .

L’application de démarrage contient déjà le modèle de données principal que vous allez utiliser. product contient des informations sur la croisière, notamment la liste des cabines disponibles (cabins). Vous allez utiliser l’objet booking pour stocker les options que l’utilisateur sélectionne pour la réservation. Vous pouvez voir la configuration dans le fichier index.js.

Créer le formulaire

Créez le formulaire que l’utilisateur va utiliser pour configurer la réservation :

1. Dans Visual Studio Code, ouvrez le fichier index.html.

2. Sur la ligne après le commentaire TODO: Add booking form, ajoutez le code HTML suivant.

   <!-- TODO: Add booking form -->
   <form v-show="!booking.completed">
       <h2>Book now!</h2>
       <div class="row">
           <label for="product-cabin">Select class:</label>
           <select id="product-cabin" v-model="booking.cabinIndex">
               <option v-for="(cabin, index) in product.cabins" :value="index">
                   {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
               </option>
           </select>
       </div>
       <div class="row">
           <label for="notes">Notes:</label>
           <textarea v-model="booking.notes" rows="3"></textarea>
       </div>
       <div class="row">
           <!--TODO: Add button later -->
   
   
       </div>
   </form>
   

Décomposer le code

Intéressons-nous au code HTML que vous avez ajouté à la page.

Élément form

<form v-show="!booking.completed">

L’élément form est un élément de formulaire HTML normal. L’attribut de clé que vous avez ajouté est v-show. Il vous permet d’activer ou désactiver l’affichage d’un élément dans Vue.js. Dans cette conception, vous voulez afficher l’élément si la réservation est incomplète. En définissant v-show sur !booking.completed, vous indiquez que le formulaire s’affichera tant que la réservation sera ! (non) completed.

Élément select pour les cabines

<select id="product-cabin" v-model="booking.cabinIndex">
    <option v-for="(cabin, index) in product.cabins" :value="index">
        {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
    </option>
</select>

Vous affichez la liste des cabines disponibles à l’aide d’un élément select. Vous voulez lier la valeur sélectionnée, à savoir l’index, à booking.cabinIndex.

La liste des cabines disponibles se trouve dans product.cabins, donc vous utilisez v-for pour créer la liste des options pour la liste déroulante. Vous définissez la valeur (value) de chaque option sur index. Et vous créez un affichage du nom (name) de la cabine et de son prix (price).

Élément textarea pour les remarques

<textarea v-model="booking.notes" rows="3"></textarea>

Vous liez l’option booking.notes à un élément textarea. Vous définissez la taille en affectant à l’attribut rows la valeur 3.

Commentaire TODO

Remarquez le rappel TODO pour ajouter un bouton. Quand vous aurez appris à créer des gestionnaires d’événements plus loin dans ce module, vous placerez le bouton ici.

Conseil

Les commentaires TODO constituent un excellent moyen d’effectuer des remarques sur les tâches que vous avez besoin d’effectuer.

Tester les résultats

Allons voir votre page mise à jour !

1. Enregistrez tous les fichiers en sélectionnant Fichier>Enregistrer tout.
2. Ouvrez la palette de commandes en sélectionnant Ctrl+Maj+P. Sur Mac, sélectionnez Cmd+Maj+P.
3. Vérifiez que Live Server est en cours d’exécution en tapant Live Server, puis en sélectionnant Live Server : Ouvrir avec Live Server.
4. Dans un navigateur, accédez à http://localhost:5500.

Vous voyez que la page présente l’image suivante :

Vous avez maintenant lié des données Vue à un formulaire.

Continuer