Skip to content

Latest commit

 

History

History
105 lines (78 loc) · 2.46 KB

no-use-v-if-with-v-for.md

File metadata and controls

105 lines (78 loc) · 2.46 KB
Raw

disallow use v-if on the same element as v-for (vue/no-use-v-if-with-v-for)

  • ⚙️ This rule is included in all of "plugin:vue/essential", "plugin:vue/strongly-recommended" and "plugin:vue/recommended".

Never use v-if on the same element as v-for.

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 (e.g. ul, ol).

https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential

📖 Rule Details

👎 Examples of incorrect code for this rule:

<TodoItem
  v-if="complete"
  v-for="todo in todos"
  :todo="todo"
/>

In this case, the v-if should be written on the wrapper element.

<TodoItem
  v-for="todo in todos"
  v-if="todo.shown"
  :todo="todo"
/>

In this case, the v-for list variable should be replace with a computed property that returns your filtered list.

👍 Examples of correct code for this rule:

<ul v-if="complete">
  <TodoItem
    v-for="todo in todos"
    :todo="todo"
  />
</ul>
<TodoItem
  v-for="todo in shownTodos"
  :todo="todo"
/>
computed: {
  shownTodos() {
    return this.todos.filter((todo) => todo.shown)
  }
}

🔧 Options

allowUsingIterationVar - Enables The v-if directive use the reference which is to the variables which are defined by the v-for directives.

'vue/no-use-v-if-with-v-for': ['error', {
  allowUsingIterationVar: true // default: false
}]

👍 Examples of additional correct code for this rule with sample "allowUsingIterationVar": true options:

<TodoItem
  v-for="todo in todos"
  v-if="todo.shown"
  :todo="todo"
/>

👎 Examples of additional incorrect code for this rule with sample "allowUsingIterationVar": true options:

<TodoItem
  v-if="complete"
  v-for="todo in todos"
  :todo="todo"
/>

Related links