Comment combiner v-for avec v-if?

Bonjour,

Je possède un composant “liste” importé dans ma vue principale. Et ce composant “liste” importe lui-même un composant “card”. Les “cards” sont liées à l’ID des “listes”. Je fais un v-for pour afficher toutes les “listes” contenues dans ma BDD. J’aimerais faire en sorte que chaque “liste” affiche ses “cards”. J’aurais aimé faire une sorte de combinaison de v-for et v-if pour faire cela, quelque chose comme << v-for=“card in cards” :key=“card” v-if=“card.id == list.id” >>, mais bien sûr Vue n’aime pas cette combinaison. Comment faire SVP ?

Merci d’avance.

Bonjour!

Peut-être que vous pouvez fair quelque-chose comme ça:

<v-for="card in cards" :key="card.id">
    <template v-if="card.id == list.id">
        <card />
    </template>
</v-for>

@zicklag <v-for> n’existe pas

une des nombreuses possibilités

<template v-for="item in list" :key="item.id">
  <Card v-if="item.id == list.id" :data="item" />
</template>

https://vuejs.org/guide/essentials/list.html#v-for-with-v-if
https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for

1 Like

Oups, mon mauvais. J’ai accidentellement mis v-for comme balise. :+1: