Exercice : Ajouter des gestionnaires d’événements

  • 4 minutes

Maintenant, mettez à jour votre application afin d’ajouter un gestionnaire d’événements pour un bouton nouvellement créé dans votre formulaire. Ce bouton permet d’activer/désactiver l’indicateur booking.completed pour mettre à jour l’affichage.

Ajouter la fonction

Commencez par ajouter la fonction à l’application Vue :

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

  2. Sur la ligne après le commentaire TODO: Add methods, ajoutez le code suivant pour créer la fonction bookCabin. Cette fonction est le gestionnaire d’événements.

    // TODO: Add methods
methods: {
    bookCabin() {
        this.booking.completed = true;
    }
}

    Remarquez que this est lié à votre application actuelle pour fournir l’accès à l’objet booking à partir des données.

Ajouter le bouton au formulaire

Ajoutez maintenant le bouton à votre formulaire :

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

  2. Sur la ligne après le commentaire TODO: Add button later, ajoutez le code HTML suivant pour créer votre bouton.

    <!--TODO: Add button later -->
<button class="button" type="button" @click="bookCabin">Book now!</button>

    Remarquez que l’attribut @click est lié à la fonction bookCabin que vous avez créée précédemment.

Tester la page

Vous allez maintenant tester votre page mise à jour !

  1. Enregistrez tous les fichiers en sélectionnant Fichier>Enregistrer tout.
  2. Ouvrez la palette de commandes en appuyant sur 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. Ouvrez un navigateur et accédez à http://localhost:5500. La page affiche maintenant un bouton.
  5. Remplissez le formulaire et sélectionnez le bouton. Remarquez que le formulaire disparaît de la page.

Vous avez maintenant configuré un gestionnaire d’événements dans Vue.