It is recommended not to use v-if and v-for directives together on the same element because the v-for directive has a higher priority than v-if directive. If you use both directives together, then there are two common cases where this may be tempting:
- When you have to filter items in a list (e.g. v-for=”user in users” v-if=”user.isActive”). In these cases, replace users with a new computed property that returns your filtered list (e.g., activeUsers).
- To avoid rendering a list if it should be hidden (e.g. v-for=”user in users” v-if=”shouldShowUsers”). In these cases, move the v-if to a container element (e.g., ul, ol).