<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>
当我单击每个复选框时，我正在从框、绘制数组加载相关数据。通过检查匹配数据。数组。
现在，我想显示，如果单击复选框时未找到数据，我想显示一条消息“未找到数据”
下面代码的问题是，如果我将 v-if 放在顶部，将 v-for 和 v-else 数据放在最后，那么只显示很少的数据
v-for正在为“boxes”中的每个“box”进行渲染，因此对于每个框，您应该得到一个：对于 Paints 中的每个 Paint，这应该为每个盒子内的每个 Paint 渲染一个 div。
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)将被满足，并且关联的 div 将被渲染；否则，将呈现 'v-else' div（如果未注释）。您的代码将循环遍历boxes中的每个框，并且对于每个框，它将循环遍历paints中的每个paint，以在matchingdata中查找类似于以下内容的元素：
{ boxid: ..., paintid: ..., ..., }v-for 和 (v-if, v-else-if, v-else) 块没有相互连接。 v-for 表示一个循环，您将为列表中的每个项目呈现一个元素。 v-if 块将根据您定义的谓词有条件地将元素渲染到页面。
v-if、v-else-if 和 v-else 必须紧接着出现才能计入同一逻辑块。
再次使用
matchingdata.some()您可以在
v-for循环上方的v-if循环中使用matchingdata.some()，该循环检查是否可以找到任何油漆。 将v-else放在底部并包含您的文本。请参阅下面的修复：
我将其粘贴到您的代码沙箱中，它使该消息在每个框中仅出现一次。
相关部分正在使用
paints.find预先检查所有油漆：文档：