<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>
當我單擊每個複選框時，我正在從框、繪製數(shù)組載入相關資料。透過檢查匹配數(shù)據(jù)。數(shù)組。
現(xiàn)在，我想顯示，如果單擊複選框時未找到數(shù)據(jù)，我想顯示一條訊息“未找到數(shù)據(jù)”
下面程式碼的問題是，如果我將 v-if 放在頂部，將 v-for 和 v-else 資料放在最後，那麼只顯示很少的資料
2
0
0
v-for 正在為「boxes」中的每個「box」進行渲染，因此對於每個框，您應該得到一個：
{{ box.name }} {...}
對於 Paints 中的每個 Paint，這應該會為每個盒子內(nèi)的每個 Paint 渲染一個 div。
v-if 和 v-else-if 和 v-else 將根據(jù)其中包含的謂詞有條件地渲染它們的區(qū)塊。我不確定數(shù)組matchingdata 來自您的範例中的位置，但如果它包含具有與box.bodi 和paint.paintid 和paint. paintid 符合的屬性boxy 和paintid 的元素，則matchingdata.some((m ) => m.boxy == box.boxy && m. paintid == Paint.paintid) 將被滿足，並且關聯(lián)的div 將被渲染；否則，將呈現(xiàn)'v-else' div（如果未註釋）。
您的程式碼將循環(huán)遍歷boxes中的每個框，並且對於每個框，它將循環(huán)遍歷paints中的每個paint，以在matchingdata中找到類似於以下內(nèi)容的元素：
{
boxid: ...,
paintid: ...,
...,
}
v-for 和 (v-if, v-else-if, v-else) 區(qū)塊沒有相互連接。 v-for 表示一個循環(huán)，您將為清單中的每個項目呈現(xiàn)一個元素。 v-if 區(qū)塊將根據(jù)您定義的謂詞有條件地將元素渲染到頁面。
v-if、v-else-if 和 v-else 必須緊接著出現(xiàn)才能計入同一邏輯區(qū)塊。
matchingdata.some()
#您可以在v-for 循環(huán)上方的v-if 循環(huán)中使用matchingdata.some() ，該循環(huán)檢查是否可以找到任何油漆。
將 v-else 放在底部並包含您的文字。
請參閱下面的修復：
{{ box.name }}
我將其貼到您的程式碼沙箱中，它使該訊息在每個框中僅出現(xiàn)一次。
相關部分正在使用 paints.find 預先檢查所有油漆：
matchingdata.some( (m) => m.boxid == box.boxid && paints.find( (paint) => m.paintid == paint.paintid ) )
文件:
