v-if と v-for の優先順位 破壊的変更
概要
- 破壊的変更: 同じ要素で使用した場合、
v-ifはv-forより優先度が高くなります
はじめに
Vue.js で最もよく使われるディレクティブは v-if と v-for の 2 つです。そのため、開発者がこの 2 つを一緒に使いたいと思うことがあっても不思議ではありません。これは推奨される方法ではありませんが、必要な場合もあるため、その仕組についてのガイダンスを提供したいと考えています。
2.x の構文
2.x では、同じ要素に対して v-if と v-for を使用した場合、v-for が優先されました。
3.x の構文
3.x では、v-if は常に v-for より優先度が高くなります。
移行手順
構文があいまいなため、同じ要素で両方を使用することは避けることをお勧めします。
これをテンプレートレベルで管理するのではなく、表示する要素のリストをフィルタリングする算出プロパティを作成することで実現する方法があります。
移行ビルドのフラグ: COMPILER_V_IF_V_FOR_PRECEDENCE