eslint-plugin-vue

Appearance

vue/no-use-v-if-with-v-for ​

disallow using v-if on the same element as v-for

  • ⚙️ This rule is included in all of "plugin:vue/essential", *.configs["flat/essential"], "plugin:vue/vue2-essential", *.configs["flat/vue2-essential"], "plugin:vue/strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/vue2-strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/recommended", *.configs["flat/recommended"], "plugin:vue/vue2-recommended" and *.configs["flat/vue2-recommended"].

📖 Rule Details ​

This rule is aimed at preventing the use of v-for directives together with v-if 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 (e.g. ul, ol).
<template> <!-- ✓ GOOD --> <ul v-if="complete"> <TodoItem v-for="todo in todos" :todo="todo" /> </ul> <TodoItem v-for="todo in shownTodos" :todo="todo" /> <!-- ✗ BAD --> <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. --> </template>
Now loading...

🔧 Options ​

json
{
  "vue/no-use-v-if-with-v-for": ["error", {
    "allowUsingIterationVar": false
  }]
}
  • allowUsingIterationVar (boolean) ... Enables The v-if directive use the reference which is to the variables which are defined by the v-for directives. Default is false.

"allowUsingIterationVar": true ​

<template> <!-- ✓ GOOD --> <TodoItem v-for="todo in todos" v-if="todo.shown" :todo="todo" /> <!-- ✗ BAD --> <TodoItem v-for="todo in todos" v-if="shown" :todo="todo" /> </template>
Now loading...

📚 Further Reading ​

🚀 Version ​

This rule was introduced in eslint-plugin-vue v4.6.0

🔍 Implementation ​