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

<ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left! </p>Copy the code