Comment utiliser correctement v-if et v-else dans v-for dans Vuejs ?

Question

<template>
  <div>
    <div v-for="box in boxes" :key="box.id">
      <BaseAccordian>
        <template v-slot:title>{{ box.name }}</template>
        <template v-slot:content>
          <div v-for="paint in paints" :key="paint.id" class="line">
            <div
              v-if="
                matchingdata.some(
                  (m) => m.boxid == box.boxid && m.paintid == paint.paintid
                )
              "
            >
              <StatusComponent
                :box="box"
                :paint="paint"
                :matchingdata="matchingdata"
              />
            </div>
            <!-- <div v-else>no data found</div> -->
          </div>
        </template>
      </BaseAccordian>
    </div>
  </div>
</template>

Lorsque je clique sur chaque case à cocher, je charge les données pertinentes de la boîte, dessine un tableau. En vérifiant les données correspondantes. tableau.

Maintenant, je veux montrer que si les données ne sont pas trouvées en cliquant sur la case à cocher, je veux afficher un message "Données non trouvées"

Le problème avec le code ci-dessous est que si je mets le v-if en haut et les données v-for et v-else à la fin, alors seules très peu de données sont affichées

Answer 1

v-for est rendu pour chaque "boîte" dans les "boîtes", donc pour chaque boîte, vous devriez en obtenir une :

Pour chaque peinture dans Paints, cela devrait afficher un div pour chaque peinture à l'intérieur de chaque boîte.

v-if 和 v-else-if 和 v-else 将根据其中包含的谓词有条件地渲染它们的块。我不确定数组 matchingdata 来自您的示例中的位置，但如果它包含具有与 box.bodi 和 paint.paintid 和 paint.paintid 匹配的属性 boxy 和 paintid 的元素，则 matchingdata.some((m ) => m.boxy == box.boxy && m.paintid == Paint.paintid) sera satisfait et le div associé sera rendu ; sinon, le div 'v-else' sera rendu (s'il n'est pas annoté).

Votre code parcourra chaque case en cases, et pour chaque case, il parcourra chaque peinture en peintures pour trouver des éléments dans les données correspondantes qui ressemblent à :

{
  boxid: ...,
  paintid: ...,
  ...,
}

Les blocs v-for et (v-if, v-else-if, v-else) ne sont pas connectés les uns aux autres. v-for représente une boucle dans laquelle vous rendrez un élément pour chaque élément de la liste. Le bloc v-if restituera conditionnellement les éléments sur la page en fonction d'un prédicat que vous définissez.

v-if, v-else-if et v-else doivent apparaître immédiatement l'un après l'autre pour compter dans le même bloc logique.

Answer 2

Utilisez à nouveau matchingdata.some()

Vous pouvez utiliser v-for 循环上方的 v-if 循环中使用 matchingdata.some() à l'intérieur d'une boucle v-if au-dessus de la boucle v-for, qui vérifie si de la peinture peut être trouvée. Placez v-else en bas et incluez votre texte.

Voir le correctif ci-dessous :

J'ai collé ceci dans votre bac à sable de code et le message n'apparaît qu'une seule fois par boîte.

Pièces pertinentes utilisées paints.find Pré-vérifiez toutes les peintures :

matchingdata.some(
  (m) => m.boxid == box.boxid && paints.find( (paint) => m.paintid == paint.paintid )
)

Documentation :

• Array.prototype.some
• Array.prototype.find