vue.js 2 の v-for ループで v-if を使用する方法

Question

このコードを設定しました

リーリー

person オブジェクトの status 属性の値はすべて「public」です。

ただし、上記のコード スニペットでは、実行を継続するのは if ブロックではなく、else ブロックです。

コードを次のように書き直すと:

リーリー

その後、正常に動作します。

最初のクリップのどこが間違っているのでしょうか?

これには「key」属性が役割を果たしているようです。私の使い方が間違っているのでしょうか？なぜ出力に影響するのでしょうか?

「for」ループ内に「if」ステートメントを記述する最も正しい方法はどれですか?

私はこれまでコード内の他のループで最初のメソッドを使用していましたが、今日まで問題は発生していませんでした。このような奇妙な動作を避けるために、2 番目の方法と同様になるようにすべてを更新する必要がありますか?

Answer 1

vue から v-for および v-if

v-for と v-if を正しく使用しています。問題は、:key が条件ブロックに配置されていることです。

いずれの方法でも、div 内に何かがレンダリングされます。結果は 2 つあります。キーは v-for 行にある必要があります。 :key 属性を条件付きでレンダリングしないでください。

リーリー