<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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
v-forest 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.
Utilisez à nouveau
matchingdata.some()Vous pouvez utiliser
v-for循环上方的v-if循环中使用matchingdata.some()à l'intérieur d'une bouclev-ifau-dessus de la bouclev-for, qui vérifie si de la peinture peut être trouvée. Placezv-elseen 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.findPré-vérifiez toutes les peintures :Documentation :