如何在Vuejs中正确使用v-for中的v-if、v-else？

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>

当我单击每个复选框时，我正在从框、绘制数组加载相关数据。通过检查匹配数据。数组。

现在，我想显示，如果单击复选框时未找到数据，我想显示一条消息“未找到数据”

下面代码的问题是，如果我将 v-if 放在顶部，将 v-for 和 v-else 数据放在最后，那么只显示很少的数据

Answer 1

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 必须紧接着出现才能计入同一逻辑块。

Answer 2

再次使用 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