noVueVIfWithVFor (HTML)

Language HTML

Summary

Rule available since: v2.3.6
Diagnostic Category: lint/correctness/noVueVIfWithVFor
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-use-v-if-with-v-for
- Same as vue/no-use-v-else-with-v-for

How to configure

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

Description

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

There are two common cases where v-if and v-for on the same element 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.

Putting v-else-if or v-else on the same element as v-for works, but the condition is checked before the loop runs, which is hard to tell when reading the template. Move the v-else-if or v-else to a wrapper element, such as a <template>.

Examples

Invalid

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

code-block.vue:3:5 lint/correctness/noVueVIfWithVFor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Using v-if and v-for on the same element is discouraged.
  
    1 │ <TodoItem
    2 │     v-if="complete"
  > 3 │     v-for="todo in todos"
      │     ^^^^^^^^^^^^^^^^^^^^^
    4 │     :todo="todo"
    5 │ />
  
  ℹ This v-if should be moved to the wrapper element, or you should use a computed property to filter the list instead.
  
    1 │ <TodoItem
  > 2 │     v-if="complete"
      │     ^^^^^^^^^^^^^^^
    3 │     v-for="todo in todos"
    4 │     :todo="todo"
  
  ℹ Using v-if and v-for on the same element can lead to unexpected behavior and performance issues.

1
<div v-if="loading">Loading...</div>
2
<TodoItem v-else v-for="todo in todos" :todo="todo" />

code-block.vue:2:18 lint/correctness/noVueVIfWithVFor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Using v-else and v-for on the same element is discouraged.
  
    1 │ <div v-if="loading">Loading...</div>
  > 2 │ <TodoItem v-else v-for="todo in todos" :todo="todo" />
      │                  ^^^^^^^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ Move this v-else to a wrapper element, such as a <template>.
  
    1 │ <div v-if="loading">Loading...</div>
  > 2 │ <TodoItem v-else v-for="todo in todos" :todo="todo" />
      │           ^^^^^^
    3 │ 
  
  ℹ The v-else is checked before the v-for loop runs, which is hard to tell when reading the template.

Valid

1
<ul v-if="complete">
2
    <TodoItem
3
        v-for="todo in todos"
4
        :todo="todo"
5
    />
6
</ul>
7
<div v-if="loading">Loading...</div>
8
<template v-else>
9
    <TodoItem v-for="todo in todos" :todo="todo" />
10
</template>