From e1366fd7ce40f4f20efd5f72ce2405db2aecd8f6 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 28 Aug 2020 18:50:37 +0900
Subject: [PATCH] Change `vue/valid-v-for` and `vue/require-v-for-key` rules to
 not report when placing a key on `<template>` (#1287)

---
 lib/rules/require-v-for-key.js       |  8 ++--
 lib/rules/valid-v-for.js             |  6 +--
 tests/lib/rules/require-v-for-key.js | 52 +++++++++++++++++++++++
 tests/lib/rules/valid-v-for.js       | 63 +++++++++++++++++++++++++---
 4 files changed, 116 insertions(+), 13 deletions(-)

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:
         '<template><div><slot v-for="x in list" :name="x"><div :key="x"></div></slot></div></template>'
+    },
+    // key on <template> : In Vue.js 3.x, you can place key on <template>.
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" v-bind:key="x"><div /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" v-bind:key="x"><MyComp /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" :key="x"><div /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" :key="x"><MyComp /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" :key="x.id"><div /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" :key="x.id"><MyComp /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="(x, i) in list" :key="i"><div /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="(x, i) in list" :key="i"><MyComp /></template></div></template>'
+    },
+    // key on <slot> : In Vue.js 3.x, you can place key on <slot>.
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><slot v-for="x in list" :key="x"><div /></slot></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><slot v-for="x in list" :key="x"><MyComp /></slot></div></template>'
     }
   ],
   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, {
         </template>
       `
     },
+    // key on <template> : In Vue.js 3.x, you can place key on <template>.
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" v-bind:key="x"><div /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" v-bind:key="x"><MyComp /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" :key="x"><div /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" :key="x"><MyComp /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" :key="x.id"><div /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" :key="x.id"><MyComp /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="(x, i) in list" :key="i"><div /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="(x, i) in list" :key="i"><MyComp /></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><template v-for="x in list" :key="x"><custom-component></custom-component></template></div></template>'
+    },
+    // key on <slot> : In Vue.js 3.x, you can place key on <slot>.
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><slot v-for="x in list" :key="x"><div /></slot></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code:
+        '<template><div><slot v-for="x in list" :key="x"><MyComp /></slot></div></template>'
+    },
     // 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:
-        '<template><div><template v-for="x in list" :key="x"><custom-component></custom-component></template></div></template>',
-      errors: ["Custom elements in iteration require 'v-bind:key' directives."]
-    },
     {
       filename: 'test.vue',
       code: