Vue - Collection de films:Part 1

Dans le cadre de cet exercice, vous devez créer une petite application web vous permettant de classer votre collection de films, à voir ou déjà vu. Dans cette partie particulière de l'exercice, vous devez créer des méthodes Vue.js et utiliser les classes CSS dynamiques de Vue.js.

Aperçu du résultat 👇

Matériel

Faites toujours un fork du Pen de départ

Pen de départ Requis de base et des boutons [-] et [+] Créez une app Vue.js Créez une donnée Vue year qui sera initialisée à l'année 2022. Cette donnée devra être affichée entre les deux boutons [-] et [+] dans la section Quelle année de sortie? Créez des méthodes pour incrémenter et décrémenter l'année dans la section Quelle année de sortie? afin de changer cette données dynamiquement en cliquant sur les boutons [+] ou [-] correspondants. Requis classes dynamiques À l'aide de classe dynamique sur les li, ajoutez ou supprimez la classe .selectedYear en fonction de l'année présentée dans la section Quelle année de sortie? Faites attention de conserver la .classe-static qui s'y trouve déjà. Requis pour limiter le bouton [+] à l'année courante Créez une autre donnée Vue currentYear qui stockera l'année courante. Recherchez sur le web pour savoir comment récupérer la donnée de l'année en cours. Créez une donnée booléenne isCurrentYear initialisée à false puisque l'année de départ 2022 n'est pas égale à l'année courante currentYear qui est 2024. À chaque clic du bouton [+], vérifiez si l'année montrée dans la section Quelle année de sortie? est égale à l'année courante, si tel est le cas, changez la valeur de isCurrentYear à true. Profitez-en pour empêcher l'incrémentation de l'année affichée dans la section Quelle année de sortie? afin qu'elle ne continue pas à monter au delà de l'année courante. Finalement, ajoutez la classe .disabled au bouton [+] lorsque isCurrentYear est à true. Notes de cours 📚