Adloun

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

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →