noVueVIfWithVFor
Summary
Section titled “Summary”- Rule available since:
v2.3.6 - Diagnostic Category:
lint/correctness/noVueVIfWithVFor - This rule is recommended, meaning it is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- This rule belongs to the following domains:
- Sources:
- Same as
vue/no-use-v-if-with-v-for
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "correctness": { "noVueVIfWithVFor": "error" } } }}Description
Section titled “Description”Disallow using v-if and v-for 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.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<TodoItem v-if="complete" v-for="todo in todos" :todo="todo"/>code-block.vue:3:5 lint/correctness/noVueVIfWithVFor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Using v-if and v-for on the same element is discouraged.
1 │ <TodoItem
2 │ v-if=“complete”
> 3 │ v-for=“todo in todos”
│ ^^^^^^^^^^^^^^^^^^^^^
4 │ :todo=“todo”
5 │ />
ℹ This v-if should be moved to the wrapper element, or you should use a computed property to filter the list instead.
1 │ <TodoItem
> 2 │ v-if=“complete”
│ ^^^^^^^^^^^^^^^
3 │ v-for=“todo in todos”
4 │ :todo=“todo”
ℹ Using v-if and v-for on the same element can lead to unexpected behavior and performance issues.
<ul v-if="complete"> <TodoItem v-for="todo in todos" :todo="todo" /></ul>Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.