如何在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