v-for は「boxes」内の「box」ごとにレンダリングされるため、ボックスごとに次の 1 つを取得する必要があります。 リーリー

v-if および v-else-if および v-else は、ブロック内に含まれる述語に基づいて条件付きでブロックをレンダリングします。あなたの例では、配列 matchingdata がどこから来たのかわかりませんが、box.bodi と paint.paintid および のファイルが含まれている場合は、 Paint.paintid は、属性 boxy および paintid を持つ要素と一致し、その後 matchingdata.some((m ) =>gt; m.boxy == box.boxy && m.paintid == Paint.paintid) が満たされ、関連付けられた div がレンダリングされます。そうでない場合は、「v-else」 div がレンダリングされます (注釈が付けられていない場合)。

v-for ブロックと (v-if、v-else-if、v-else) ブロックは相互に接続されていません。 v-for は、リスト内の各項目の要素をレンダリングするループを表します。 v-if ブロックは、定義した述語に基づいて条件付きで要素をページにレンダリングします。

v-if、v-else-if、および v-else は、同じ論理ブロック内でカウントされるように、それぞれの直後に出現する必要があります。

再度使用 matchingdata.some()

v-for ループの上の v-if ループ内で、ペイントが見つかるかどうかを確認する matchingdata.some() を使用できます。 v-else を一番下に配置し、テキストを含めます。

以下の修正を参照してください:

これをコード サンドボックスに貼り付けたところ、ボックスごとにメッセージが 1 回だけ表示されるようになりました。

関連パーツは paints.find を使用していますすべてのペイントを事前チェックします:

Array.prototype.some
• 一个>
Array.prototype.find
• 一个>