Vuejs の v-for で v-if と v-else を正しく使用するにはどうすればよいですか?

Question

リーリー

各チェックボックスをクリックすると、ボックスから関連データが読み込まれ、配列が描画されます。マッチングデータを確認することによって。配列。

ここで、チェックボックスをクリックしたときにデータが見つからない場合に、「データが見つかりません」というメッセージを表示したいと思います。

以下のコードの問題は、v-if を先頭に、v-for および v-else データを最後に配置すると、ごくわずかなデータしか表示されないことです。

Answer 1

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

ペイント内の各ペイントについて、各ボックス内の各ペイントの div をレンダリングする必要があります。

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 がレンダリングされます (注釈が付けられていない場合)。

コードはボックス内の各ボックスをループし、ボックスごとにペイント内の各ペイントをループして、次のようなmatchingdata 内の要素を見つけます。 リーリー

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 を一番下に配置し、テキストを含めます。

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

リーリー

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

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

リーリー ＃＃＃書類：＃＃＃

Array.prototype.some
Array.prototype.find