- L'objectif de ce TP est de modifier le TP 2 afin d'intégrer les 4 directives basiques vues en cours (v-bind, v-model, v-if, v-for).
- Au terme de ce TP, on doit s'apercevoir qu'il ne reste presque plus de javascript pour manipuler le DOM.
Exercice 1 - relation bidirectionnelle + affichage conditionnel + affichage listes
- en partant de l'affichage demandé dans le TP 2 (nommé fiche personnage dans la suite), modifiez shop.html ET index.js, afin d'ajouter au début de la page un label + champ de saisie permettant de saisir un indice idPlayer observé par vuejs.
- Si cet indice i est non vide, supérieur ou égal à 0 et inférieur à la taille de players, alors on affiche la fiche du personnage players[idPlayer]. Sinon, on affiche rien.
- Modifiez également le HTML pour que le tableau des localisations soit créé grâce à des directives vuejs plutôt que javascript.
- Bien entendu, toute la fiche personnage doit donner les informations associées à players[idPlayer] et si idPlayer change, alors le contenu de la fiche change également.
- Entre le tableau des localisations et l'or disponible, ajoutez une balise <p> contenant la liste des items achetés (au début vide).
- Enfin, supprimez tout le HTML et le javascript associé aux boutons radio, au bouton "Buy" et au champ indiquant le prix.
- rappel 1 : v-if prend une expression en paramètre retournant un booléen. Vous pouvez donc parfaitement écrire une expression logique composée de plusieurs tests reliés par des ||, &&, ...
- rappel 2 : l'expression de v-if ne peut comporter que des variables observée par la vue.
Exercice 2 - la boutique (version 1 - simple)
- Ajoutez dans model.js un tableau appelé shop, contenant 10 items (que vous choisirez ou bien que vous tirez au hasard)
- Ajoutez en fin de page, ajoutez la liste des items contenus dans shop, chaque ligne comportant le nom et le prix de l'item.
- Ajoutez un champ de saisie permettant de saisir un indice idChosenItem observé par vuejs, ainsi qu'un bouton intitulé "Buy XXXX", où XXXX doit être remplacé par le nom de l'item dont l'indice est idChosenItem dans shop.
- Utiliser l'attribut onclick du bouton pour appeler une méthode buy() qui :
- si le perso a assez d'or, ajoute l'item choisi à la liste des items achetés et sinon affiche un message d'alerte.
- supprime l'item du tableau shop, ce qui doit provoquer un rafraichissement de la liste affichée et du bouton "Buy".
- enlève l'or nécessaire à l'achat de la fortune du perso.
- L'item acheté doit apparaître dans le paragraphe créé à l'exercice 1.
Exercice 3 - la boutique (version 2 - plus difficile)
- Supprimez le champ de saisie de idChosenItem.
- Modifiez la liste des items de la boutique pour que chaque nom d'item soit précédé d'un bouton radio.
- Un seul bouton radio doit être sélectionnable à la fois.
- Quand on clique sur un bouton radio, cela doit changer la valeur de idChosenItem.
- Indice : faîtes une recherche sur vuejs et radiobutton pour trouver un exemple d'interaction bidirectionnelle entre un bouton radio et une variable de data.