Madea-K Dev

プログラムのメモや日々思ったことなど

< 35歳迄に起業し1000万円以上稼ぐ >

v-for と v-if

v-for と同じ要素に v-if を使わないでください。

こうしたくなってしまう2つの一般的なケースがあります:

リスト内のアイテムをフィルタする(例: v-for=”user in users” v-if=”user.isActive”)。このような場合は、フィルタリングされたリストを返却する算出プロパティに users を置き換えてください(例: activeUsers)。

非表示にする必要がある場合、リストを描画しないようにする(例: v-for=”user in users” v-if=”shouldShowUsers”)。このような場合は、v-if をコンテナ要素(例: ul、ol)に移動してください。

悪い例 :

良い例 :
※アクティブユーザーの配列だけ予め抽出しとく

悪い例 :

良い例 :

/ Vue-Nuxt

×