Ajouter des propriétés à un composant

6 minutes

Nous allons continuer à construire notre application en créant un composant pour afficher la liste actuelle des réservations. Vous allez ajouter un formulaire que l’utilisateur peut utiliser pour ajouter des réservations : pour l’instant, créez donc un tableau statique.

Créer le composant

Commencez par créer le composant.

Dans Visual Studio Code, créez un fichier nommé BookingList.vue dans src/components.
Dans BookingList.vue, tapez vue, puis sélectionnez <vue> avec default.vue dans le menu des extraits de code.

L’extrait de code va créer la structure par défaut.

Inscrire les propriétés et la valeur calculée

Nous attendons un tableau d’informations sur les réservations : nous déclarons donc notre propriété avec le type Array. Comme vous créez un composant, vous pouvez également tirer parti de propriétés calculées pour qu’elles calculent automatiquement des valeurs pour vous. Vous allez ajouter une propriété calculée pour ajouter le prix total et retourner une valeur d’affichage que vous pouvez utiliser.

Ouvrez src/components/BookingList.vue s’il n’est pas déjà ouvert.
À l’intérieur des accolades ({ }) pour export default, ajoutez le code suivant pour créer une propriété nommée bookings et la propriété computed :
```
props: {
    bookings: Array
},
computed: {
    totalDisplay() {
        let totalCost = 0;
        if (this.bookings && this.bookings.length > 0) {
            totalCost = 
                this.bookings.map(b => b.price)
                            .reduce((a, b) => a + b);
        }
        return '$ ' + totalCost.toLocaleString('en-US');
    }
}
```
Notez comment totalDisplay peut accéder à la propriété bookings en utilisant this, qui est la façon dont nous pouvons accéder aux données ou à d’autres propriétés déclarées dans le cadre de notre composant. Nous créons le code pour calculer le total de tous les prix listés dans bookings et pour créer un affichage de chaîne.

Ajouter le modèle pour l’affichage

Ajoutons le modèle pour afficher les informations de nos réservations. Vous allez utiliser v-for pour parcourir tous les réservations et la propriété calculée totalDisplay que nous avons créée précédemment.

Ouvrez src/components/BookingList.vue s’il n’est pas déjà ouvert.

Dans l’élément <template> , ajoutez le code HTML suivant :

<section>
<h2>
    Here's your current bookings:
</h2>

<div class="row" v-for="(booking, index) in bookings" :key="index">
    <div>{{ booking.name }} </div>
</div>

<h3 class="row">
    Total: {{ totalDisplay }}
</h3>
</section>

Notre code boucle dans tous les réservations avec v-for et affiche cabin. Nous appelons ensuite totalDisplay pour afficher le coût total de toutes les réservations.

Ajouter le composant à la page principale

Utilisons le composant que nous avons créé et passons une liste de réservations.

Ouvrez src/components/host.vue.
Ajoutez une nouvelle ligne sous la balise ouvrante <script> et avant export default.
Ajoutez le code suivant (y compris le commentaire) pour importer le composant BookingList :
```
import BookingList from './BookingList.vue';
// TODO: Register next component
```
Inscrivez le composant en ajoutant le code suivant (y compris le commentaire) sous le commentaire TODO: Add components :
```
components: {
    BookingList,
    // TODO: Add next component

},
```
Important

Les deux virgules sont nécessaires, car nous allons des valeurs plus tard.

Utiliser le composant

Une fois le composant inscrit, appelons-le dans notre page. Nous allons utiliser le tableau bookings que nous avons créé précédemment pour remplir la liste des réservations sur la page.

Ouvrez src/components/Host.vue s’il n’est pas déjà ouvert.
Sous le commentaire TODO: Add booking-list, ajoutez le code suivant pour utiliser le composant booking-list :
```
<booking-list :bookings="bookings"></booking-list>
```

Tester la page

Une fois le composant inscrit et configuré, testons la page !

Enregistrez tous les fichiers en sélectionnant Fichier>Enregistrer tout.
Revenez à la fenêtre de votre navigateur avec http://localhost:8080 et actualisez la page.

La page affiche maintenant l’exemple de réservation.

Félicitations ! Vous avez créé un composant avec des propriétés.