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

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

⚙️ 此规则包含在所有 "plugin:vue/vue3-essential"、*.configs["flat/essential"]、"plugin:vue/essential"、*.configs["flat/vue2-essential"]、"plugin:vue/vue3-strongly-recommended"、*.configs["flat/strongly-recommended"]、"plugin:vue/strongly-recommended"、*.configs["flat/vue2-strongly-recommended"]、"plugin:vue/vue3-recommended"、*.configs["flat/recommended"]、"plugin:vue/recommended" 和 *.configs["flat/vue2-recommended"] 中。

📖 规则详情

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

在以下两种常见情况下，您可能会尝试这样做

要筛选列表中的项目（例如 v-for="user in users" v-if="user.isActive"）。在这种情况下，请将 users 替换为返回已筛选列表的新计算属性（例如 activeUsers）。
为了避免在应该隐藏列表时渲染列表（例如，v-for="user in users" v-if="shouldShowUsers"），请将 v-if 移动到容器元素（例如，ul、ol）中。

正在加载...

json

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

allowUsingIterationVar (boolean) ... 允许 v-if 指令使用由 v-for 指令定义的变量引用。默认为 false。

正在加载...

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