useVueValidVFor
Summary
Section titled “Summary”- Rule available since:
v2.4.15 - Diagnostic Category:
lint/nursery/useVueValidVFor - This rule doesn’t have a fix.
- The default severity of this rule is information.
- This rule belongs to the following domains:
- Sources:
- Same as
vue/valid-v-for
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "useVueValidVFor": "error" } } }}Description
Section titled “Description”Enforces valid v-for directives in Vue templates.
This rule reports v-for directives in the following cases:
- The directive has an argument. E.g.
<div v-for:aaa="item in items"></div> - The directive has a modifier. E.g.
<div v-for.bbb="item in items"></div> - The directive does not have a value. E.g.
<div v-for></div> - The second or third aliases are empty or are not simple identifiers.
- A custom component rendered with
v-foris missingv-bind:key. - The
v-bind:keyexpression does not use any variable introduced by thev-fordirective.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<div v-for:aaa="item in items"></div>code-block.vue:1:11 lint/nursery/useVueValidVFor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ The v-for directive does not accept an argument.
> 1 │ <div v-for:aaa=“item in items”></div>
│ ^^^^
2 │
ℹ v-for only accepts the special list-rendering syntax as its value.
ℹ Remove the argument and use a value such as v-for=“item in items”.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
<div v-for="(item, { key }) in items"></div>code-block.vue:1:20 lint/nursery/useVueValidVFor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ The second and third v-for aliases must be identifiers.
> 1 │ <div v-for=“(item, { key }) in items”></div>
│ ^^^^^^^
2 │
ℹ Only the main item alias may use destructuring. The optional key and index aliases must be simple names.
ℹ Replace this alias with an identifier such as index.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
<MyItem v-for="item in items"></MyItem>code-block.vue:1:1 lint/nursery/useVueValidVFor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Custom components rendered with v-for require a v-bind:key directive.
> 1 │ <MyItem v-for=“item in items”></MyItem>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Vue relies on keys to keep component instances stable across list updates.
ℹ Add a key that uses one of the iteration variables, such as :key=“item.id”.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
<div v-for="item in items" :key="foo"></div>code-block.vue:1:28 lint/nursery/useVueValidVFor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This v-bind:key directive does not use any variables from the v-for directive.
> 1 │ <div v-for=“item in items” :key=“foo”></div>
│ ^^^^^^^^^^
2 │
ℹ Keys that are unrelated to the current iteration can cause Vue to reuse the wrong element or component instance.
ℹ Reference one of the variables introduced by the v-for directive in the key expression.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
<div v-for="item in items"></div><MyItem v-for="item in items" :key="item.id" /><template v-for="item in items"> <div :key="item.id"></div></template>Related rules:
Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.