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

Question

賞金將在 6 天后到期。 此問題的答案有資格獲得+100聲望賞金。 Sundar正在尋找一個規范的答案。

 <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>

當我單擊每個復選框時，我正在從 box、paint 數組中加載相關數據。 通過檢查匹配數據。 大批。

現在，我想顯示，如果沒有找到復選框的數據 onclick，我想顯示一條消息為“找不到數據”

下面代碼的問題是，如果我將 v-if 放在頂部，將 v-for 和 v-else 數據放在最后，那么只有很少的數據顯示

Answer 1

再次使用matchingdata.some()

您可以在v-for v-if中使用matchingdata.some() ，它會檢查是否可以找到任何顏料。 在文本的底部放置一個v-else 。

請參閱下面的修復：

<template>
  <div>
    <div v-for="box in boxes" :key="box.id">
      <BaseAccordian>
        <template v-slot:title>{{ box.name }}</template>
        <template v-slot:content>
          <template v-if="
              matchingdata.some(
                (m) => m.boxid == box.boxid && paints.find( (paint) => m.paintid == paint.paintid )
              )
            "
          >
            <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>
          </template>
          <div v-else>no data found</div>
        </template>
      </BaseAccordian>
    </div>
  </div>
</template>

我將其粘貼到您的代碼沙箱中，它使消息每個框只出現一次。

相關部分是使用paints.find預先檢查所有油漆：

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

文檔：

• Array.prototype.some
• Array.prototype.find

Answer 2

v-if檢查ok和not ok應該寫在外部 for 循環之前
（在這一行之前<div v-for="paint in paints":key="paint.id" class="line"> ）
所以整個代碼應該是這樣的：

    <div v-if="your data existence checking ....."> 
   <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>
         </div>
<div v-else>no data found</div>