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

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

⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/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).

Now loading...

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.

Now loading...

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