Vue : construire une application web (école d'ingénieur) · Chapitre 2 · Application directe du cours
Seulement les livres en stock
Gabarits et directives · niveau 2
Énoncé
Corriger le gabarit de la section « v-for et v-if sur le même élément » sans toucher à setup, puis proposer une seconde correction, qui modifie setup et laisse le gabarit plus simple.
Corrigé
Sans toucher à setup, la boucle passe sur un <template> et la condition sur l'élément intérieur :
<ul id="app">
<template v-for="livre in livres" :key="livre.titre">
<li v-if="livre.stock > 0">{{ livre.titre }}</li>
</template>
</ul>
<li>Programmation Java</li><li>Le Petit Prince</li>
Seconde correction : setup renvoie directement les livres en stock, livres.filter((l) => l.stock > 0), et le gabarit devient une simple boucle. C'est préférable : la logique de sélection est dans le JavaScript, où elle se teste (chapitre 11), et le gabarit ne fait qu'afficher.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.