When v-if is used with V-for, v-for has a higher priority than V-if, which means that V-IF will be repeated separately in each V-for loop
Therefore, it is not recommended to use v-if and V-for together
Use recommended methods:
<ul><liv-for="user in activeUsers":key="user.id">{{ user.name }}</li></ul>
<ul v-if="shouldShowUsers"><liv-for="user in users":key="user.id">{{ user.name }}</li></ul>
Copy the code
Or: put the calculated property traversal
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul><liv-for="user in activeUsers":key="user.id">{{ user.name }}</li></ul>
Copy the code
When they are on the same node, V-for takes precedence over V-IF, which means that V-IF will run separately in each V-for loop. When you want to be the only
Some of the
This priority mechanism can be useful when items render nodes, as follows:
<li v-for="todo in todos" v-if="! todo.isComplete"> {{ todo }} </li>Copy the code
The above code only passes unfinished TODOS.
If your goal is to conditionally skip the loop, place v-if on the outer element (or
). Such as:
<ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left! </p>Copy the code