noVueVIfWithVFor

摘要

¥Summary

规则生效日期：v2.3.6

¥Rule available since: v2.3.6
诊断类别：lint/nursery/noVueVIfWithVFor

¥Diagnostic Category: lint/nursery/noVueVIfWithVFor
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
此规则属于以下域：

¥This rule belongs to the following domains:
- vue
来源：

¥Sources:
- 与 vue/no-use-v-if-with-v-for 相同
  
  ¥Same as vue/no-use-v-if-with-v-for

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueVIfWithVFor": "error"
6
      }
7
    }
8
  }
9
}

¥Description

禁止在同一元素上使用 v-if 和 v-for 指令。

¥Disallow using v-if and v-for 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 移至容器元素。

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

¥Examples

¥Invalid

1
<TodoItem
2
    v-if="complete"
3
    v-for="todo in todos"
4
    :todo="todo"
5
/>

¥Valid

1
<ul v-if="complete">
2
    <TodoItem
3
        v-for="todo in todos"
4
        :todo="todo"
5
    />
6
</ul>