useVueValidVFor (HTML)

Language HTML

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:
- vue
Sources:
- Same as vue/valid-v-for

How to configure

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

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-for is missing v-bind:key.
The v-bind:key expression does not use any variable introduced by the v-for directive.

Examples

Invalid

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

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

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

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

Valid

1
<div v-for="item in items"></div>

1
<MyItem v-for="item in items" :key="item.id" />

1
<template v-for="item in items">
2
    <div :key="item.id"></div>
3
</template>

Related rules:

useVueVForKey

useVueValidVFor (HTML)

Summary

How to configure

Description

Examples

Invalid

Valid

Related links