V-if not recommended for use on a v-for the same elements. Because the v-for priority than v-if instructions when they are in the same node. V-for priority higher than the v-if, which means that the v-if repeated run separately for each v-for loop.
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
<li>
</ul>
If the instruction is added to the parent element, it can be avoided for each list item will be evaluated.
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
<li>
</ul>
If you need to filter out unwanted an item in the list, it is recommended to use the calculation attribute.
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
...... //
...... //
<ul>
<li
v-for="user in activeUsers"
:key="user.id">
{{ user.name }}
<li>
</ul>