Préambule

• Ce TP vient compléter le TP 1 en utilisant les directives basiques de vuejs pour modifier le comportement des 3 composants existants.
• Il n'y pas besoin de créer un nouveau projet : il suffit de travailler sur les sources créées dans le TP 1.
• Certaines parties sont "à recopier" et servent d'exemples pour les exercices réels.

1°/ Affichage de listes avec v-for.

• Si vous avez correctement implémenté l'exercice 3.4 du TP1, vous devriez avoir dans le template de BankAccountView.vue une ligne du style :

<p>passed transactions: {{ accountTransactions }}</p>

• Cette ligne affiche le tableau des transactions reliés à un numéro de compte, tel que présent dans le store, c'est-à-dire au format JSON. Cela suppose que vous avez utilisé une variable accountTransactions dans le store (comme suggéré dans le sujet)
• Au lieu d'afficher bêtement l'objet JSON, il est possible de créer une liste à puce grâce à <ul> + <li>.
• Pour créer autant de balise <li> qu'il y a des personnages, il suffit d'utiliser la directive v-for de vuejs.

Exercice :

• Utilisez cette directive dans BankAccountView pour afficher une liste à puce, avec comme information le montant et la date de la transaction

Remarque : dans data.js, la date stockée dans le tableau transactions n'est pas directement une chaîne de caractère normalisée, mais telle que stockée dans le BdD, c.a.d. sous la forme d'un objet avec un champ $date, qui lui est normalisé. La vraie date est donc accessible grâce à une expression du type trans.date.$date. De plus, le format normalisé n'est pas très lisible (par ex : 2023-05-30T17:09:29.199Z) donc il vaut mieux le transformer pour un humain.

Exercice

• transformez la date de chaque transaction pour qu'elle soit affichée au format : "XX/YY/ZZZZ at HH:MM:SS", où XX est le mois, YY le jour, et ZZZZ l'année.

Pour ce faire, vous avez plusieurs solutions, la plus "simple" consistant à créer une fonction de transformation dans methods, et de l'appeler dans le template.

2°/ Champ de saisie et v-model

• La balise <input> permet de créer des champs de saisie de type texte, case à cocher, bouton radio.
• Pour que l'état du champ soit relié de façon bidirectionnelle à une variable d'un composant, il suffit d'utiliser la directive v-model en lui assignant le nom de la variable.
• De ce fait, si on modifie la valeur de la variable, le changement sera reporté dans le champ et inversement, si l'utilisateur change l'état du champ grâce à une interaction souris/clavier, la valeur de la variable sera modifiée en conséquence.