diff --git a/lib/rules/require-v-for-key.js b/lib/rules/require-v-for-key.js
index 987cb9794..3f82e696a 100644
--- a/lib/rules/require-v-for-key.js
+++ b/lib/rules/require-v-for-key.js
@@ -33,16 +33,16 @@ module.exports = {
* @param {VElement} element The element node to check.
*/
function checkKey(element) {
+ if (utils.hasDirective(element, 'bind', 'key')) {
+ return
+ }
if (element.name === 'template' || element.name === 'slot') {
for (const child of element.children) {
if (child.type === 'VElement') {
checkKey(child)
}
}
- } else if (
- !utils.isCustomComponent(element) &&
- !utils.hasDirective(element, 'bind', 'key')
- ) {
+ } else if (!utils.isCustomComponent(element)) {
context.report({
node: element.startTag,
loc: element.startTag.loc,
diff --git a/lib/rules/valid-v-for.js b/lib/rules/valid-v-for.js
index 81fcc8a0d..0d560aa91 100644
--- a/lib/rules/valid-v-for.js
+++ b/lib/rules/valid-v-for.js
@@ -70,7 +70,9 @@ function checkChildKey(context, vFor, child) {
* @param {VElement} element The element node to check.
*/
function checkKey(context, vFor, element) {
- if (element.name === 'template') {
+ const vBindKey = utils.getDirective(element, 'bind', 'key')
+
+ if (vBindKey == null && element.name === 'template') {
for (const child of element.children) {
if (child.type === 'VElement') {
checkChildKey(context, vFor, child)
@@ -79,8 +81,6 @@ function checkKey(context, vFor, element) {
return
}
- const vBindKey = utils.getDirective(element, 'bind', 'key')
-
if (utils.isCustomComponent(element) && vBindKey == null) {
context.report({
node: element.startTag,
diff --git a/tests/lib/rules/require-v-for-key.js b/tests/lib/rules/require-v-for-key.js
index 4b521593a..f98da8bc1 100644
--- a/tests/lib/rules/require-v-for-key.js
+++ b/tests/lib/rules/require-v-for-key.js
@@ -56,6 +56,58 @@ tester.run('require-v-for-key', rule, {
filename: 'test.vue',
code:
''
+ },
+ // key on : In Vue.js 3.x, you can place key on .
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
+ // key on : In Vue.js 3.x, you can place key on .
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
}
],
invalid: [
diff --git a/tests/lib/rules/valid-v-for.js b/tests/lib/rules/valid-v-for.js
index 94fa43467..e42fa4f4a 100644
--- a/tests/lib/rules/valid-v-for.js
+++ b/tests/lib/rules/valid-v-for.js
@@ -128,6 +128,63 @@ tester.run('valid-v-for', rule, {
`
},
+ // key on : In Vue.js 3.x, you can place key on .
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
+ // key on : In Vue.js 3.x, you can place key on .
+ {
+ filename: 'test.vue',
+ code:
+ ''
+ },
+ {
+ filename: 'test.vue',
+ code:
+ '
'
+ },
// parsing error
{
filename: 'parsing-error.vue',
@@ -254,12 +311,6 @@ tester.run('valid-v-for', rule, {
"Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
]
},
- {
- filename: 'test.vue',
- code:
- '
',
- errors: ["Custom elements in iteration require 'v-bind:key' directives."]
- },
{
filename: 'test.vue',
code: