v-if
will have higher precedence than v-for
Two of the most commonly used directives in Vue.js are v-if
and v-for
. So it's no surprise that there comes a time when developers want to use both together. While this is not a recommended practice, there may be times when this is necessary, so we wanted to provide guidance for how it works.
In 2.x, when using v-if
and v-for
on the same element, v-for
would take precedence.
In 3.x, v-if
will always have the higher precedence than v-for
.
It is recommended to avoid using both on the same element due to the syntax ambiguity.
Rather than managing this at the template level, one method for accomplishing this is to create a computed property that filters out a list for the visible elements.
Migration build flag: COMPILER_V_IF_V_FOR_PRECEDENCE
© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://v3.vuejs.org/guide/migration/v-if-v-for.html