useVueValidVFor

Summary

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

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.

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

1
<div v-for="(item, { key }) in items"></div>

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

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

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: