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 预先检查所有油漆：

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

文档：

• Array.prototype.some一个>
• Array.prototype.find一个>