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

禁止在与 v-for 相同的元素上使用 v-if

⚙️ 此规则包含在 "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" 和 *.configs["flat/vue2-recommended"] 中。

📖 规则详情

此规则旨在防止在同一元素上同时使用 v-for 指令和 v-if 指令。

¥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:

过滤列表中的项目（例如 v-for="user in users" v-if="user.isActive"）。在这些情况下，用返回过滤列表的新计算属性替换 users（例如 activeUsers）。
¥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).
如果列表应该隐藏，则避免渲染它（例如 v-for="user in users" v-if="shouldShowUsers"）。在这些情况下，将 v-if 移动到容器元素（例如 ul、ol）。
¥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...

¥🔧 Options

json

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

allowUsingIterationVar (boolean) ...启用 v-if 指令使用对 v-for 指令定义的变量的引用。默认值为 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...

¥👫 Related Rules

¥📚 Further Reading

¥🚀 Version

此规则在 eslint-plugin-vue 中引入 v4.6.0

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

¥🔍 Implementation