noVueVIfWithVFor

Summary

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueVIfWithVFor": "error"
6
      }
7
    }
8
  }
9
}

Disallow using v-if and v-for directives on the same element.

There are two common cases where this can be tempting:

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.

1
<TodoItem
2
    v-if="complete"
3
    v-for="todo in todos"
4
    :todo="todo"
5
/>

1
<ul v-if="complete">
2
    <TodoItem
3
        v-for="todo in todos"
4
        :todo="todo"
5
    />
6
</ul>