Wie verwende ich v-if und v-else in v-for in Vuejs richtig?

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>

Wenn ich auf jedes Kontrollkästchen klicke, lade ich die relevanten Daten aus dem Feld und zeichne ein Array. Durch die Überprüfung übereinstimmender Daten. Array.

Jetzt möchte ich anzeigen, dass die Meldung „Daten nicht gefunden“ angezeigt wird, wenn die Daten beim Klicken auf das Kontrollkästchen nicht gefunden werden

Das Problem mit dem folgenden Code besteht darin, dass, wenn ich die v-if-Daten oben und die v-for- und v-else-Daten am Ende einfüge, nur sehr wenige Daten angezeigt werden

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