# vue/valid-v-for
enforce valid
v-fordirectives
- ⚙️ This rule is included in all of
"plugin:vue/vue3-essential","plugin:vue/essential","plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended".
This rule checks whether every v-for directive is valid.
# 📖 Rule Details
This rule reports v-for directives in the following cases:
- The directive has that argument. E.g.
<div v-for:aaa></div> - The directive has that modifier. E.g.
<div v-for.bbb></div> - The directive does not have that attribute value. E.g.
<div v-for></div> - If the element which has the directive is a custom component, the component does not have
v-bind:keydirective. E.g.<your-component v-for="item in list"></your-component> - The
v-bind:keydirective does not use the variables which are defined by thev-fordirective. E.g.<div v-for="x in list" :key="foo"></div>
If the element which has the directive is a reserved element, this rule does not report it even if the element does not have v-bind:key directive because it's not fatal error. vue/require-v-for-key rule reports it.
<template>
<!-- ✓ GOOD -->
<div v-for="todo in todos"/>
<MyComponent
v-for="todo in todos"
:key="todo.id"
/>
<div
v-for="todo in todos"
:is="MyComponent"
:key="todo.id"
/>
<!-- ✗ BAD -->
<div v-for/>
<div v-for:aaa="todo in todos"/>
<div v-for.bbb="todo in todos"/>
<div
v-for="todo in todos"
is="MyComponent"
/>
<MyComponent v-for="todo in todos"/>
<MyComponent
v-for="todo in todos"
:key="foo"
/>
</template>
Note
This rule does not check syntax errors in directives. vue/no-parsing-error rule reports it. The following cases are syntax errors:
- The directive's value isn't
alias in expr. E.g.<div v-for="foo"></div> - The alias isn't LHS. E.g.
<div v-for="foo() in list"></div>
# 🔧 Options
Nothing.
# 👫 Related Rules
# 🚀 Version
This rule was introduced in eslint-plugin-vue v3.11.0