Update: add check for key attribute of child of templates (refs #43)

Author: mysticatea

lib/rules/no-invalid-v-for.js

@@ -17,15 +17,16 @@ const utils = require('../utils')
 
 /**
  * Check whether the given attribute is using the variables which are defined by `v-for` directives.
- * @param {ASTNode} node The attribute node to check.
+ * @param {ASTNode} vFor The attribute node of `v-for` to check.
+ * @param {ASTNode} vBindKey The attribute node of `v-bind:key` to check.
  * @returns {boolean} `true` if the node is using the variables which are defined by `v-for` directives.
  */
-function isUsingIterationVar (node) {
-  if (node.value == null) {
+function isUsingIterationVar (vFor, vBindKey) {
+  if (vBindKey.value == null) {
     return false
   }
-  const references = node.value.references
-  const variables = node.parent.parent.variables
+  const references = vBindKey.value.references
+  const variables = vFor.parent.parent.variables
 
   return references.some(reference =>
         variables.some(variable =>
@@ -35,6 +36,32 @@ function isUsingIterationVar (node) {
     )
 }
 
+/**
+ * Check the given element about `v-bind:key` attributes.
+ * @param {RuleContext} context The rule context to report.
+ * @param {ASTNode} vFor The attribute node of `v-for` to check.
+ * @param {ASTNode} element The element node to check.
+ */
+function checkKey (context, vFor, element) {
+  const startTag = element.startTag
+  const vBindKey = utils.getDirective(startTag, 'bind', 'key')
+
+  if (utils.isCustomComponent(startTag) && vBindKey == null) {
+    context.report({
+      node: startTag,
+      loc: startTag.loc,
+      message: "Custom elements in iteration require 'v-bind:key' directives."
+    })
+  }
+  if (vBindKey != null && !isUsingIterationVar(vFor, vBindKey)) {
+    context.report({
+      node: vBindKey,
+      loc: vBindKey.loc,
+      message: "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
+    })
+  }
+}
+
 /**
  * Creates AST event handlers for no-invalid-v-for.
  *
@@ -46,20 +73,15 @@ function create (context) {
 
   utils.registerTemplateBodyVisitor(context, {
     "VAttribute[directive=true][key.name='for']" (node) {
-      const vBindKey = utils.getDirective(node.parent, 'bind', 'key')
-      if (utils.isCustomComponent(node.parent) && vBindKey == null) {
-        context.report({
-          node,
-          loc: node.loc,
-          message: "'v-for' directives on custom elements require 'v-bind:key' directives."
-        })
-      }
-      if (vBindKey != null && !isUsingIterationVar(vBindKey)) {
-        context.report({
-          node: vBindKey,
-          loc: vBindKey.loc,
-          message: "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
-        })
+      const element = node.parent.parent
+
+      checkKey(context, node, element)
+      if (element.startTag.id.name === 'template') {
+        for (const child of element.children) {
+          if (child.type === 'VElement') {
+            checkKey(context, node, child)
+          }
+        }
       }
 
       if (node.key.argument) {

lib/rules/require-v-for-key.js

@@ -15,6 +15,23 @@ const utils = require('../utils')
 // Helpers
 // ------------------------------------------------------------------------------
 
+/**
+ * Check the given element about `v-bind:key` attributes.
+ * @param {RuleContext} context The rule context to report.
+ * @param {ASTNode} element The element node to check.
+ */
+function checkKey (context, element) {
+  const startTag = element.startTag
+
+  if (startTag.id.name !== 'template' && !utils.isCustomComponent(startTag) && !utils.hasDirective(startTag, 'bind', 'key')) {
+    context.report({
+      node: startTag,
+      loc: startTag.loc,
+      message: "Elements in iteration expect to have 'v-bind:key' directives."
+    })
+  }
+}
+
 /**
  * Creates AST event handlers for require-v-for-key.
  *
@@ -24,12 +41,15 @@ const utils = require('../utils')
 function create (context) {
   utils.registerTemplateBodyVisitor(context, {
     "VAttribute[directive=true][key.name='for']" (node) {
-      if (!utils.hasDirective(node.parent, 'bind', 'key') && !utils.isCustomComponent(node.parent)) {
-        context.report({
-          node: node.parent,
-          loc: node.parent.loc,
-          message: "'v-for' directives require 'v-bind:key' directives."
-        })
+      const element = node.parent.parent
+
+      checkKey(context, element)
+      if (element.startTag.id.name === 'template') {
+        for (const child of element.children) {
+          if (child.type === 'VElement') {
+            checkKey(context, child)
+          }
+        }
       }
     }
   })

tests/lib/rules/no-invalid-v-for.js

@@ -62,6 +62,18 @@ tester.run('no-invalid-v-for', rule, {
     {
       filename: 'test.vue',
       code: '<template><div><div :is="your-component" v-for="x in list" :key="x.id"></div></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><template v-for="x in list"><custom-component :key="x"></custom-component></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><template v-for="x in list"><div :key="x"></div></template></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><template v-for="x in list"><div></div></template></div></template>'
     }
   ],
   invalid: [
@@ -108,22 +120,22 @@ tester.run('no-invalid-v-for', rule, {
     {
       filename: 'test.vue',
       code: '<template><div><your-component v-for="x in list"></your-component></div></template>',
-      errors: ["'v-for' directives on custom elements require 'v-bind:key' directives."]
+      errors: ["Custom elements in iteration require 'v-bind:key' directives."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div is="your-component" v-for="x in list"></div></div></template>',
-      errors: ["'v-for' directives on custom elements require 'v-bind:key' directives."]
+      errors: ["Custom elements in iteration require 'v-bind:key' directives."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div :is="your-component" v-for="x in list"></div></div></template>',
-      errors: ["'v-for' directives on custom elements require 'v-bind:key' directives."]
+      errors: ["Custom elements in iteration require 'v-bind:key' directives."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-bind:is="your-component" v-for="x in list"></div></div></template>',
-      errors: ["'v-for' directives on custom elements require 'v-bind:key' directives."]
+      errors: ["Custom elements in iteration require 'v-bind:key' directives."]
     },
     {
       filename: 'test.vue',
@@ -149,6 +161,11 @@ tester.run('no-invalid-v-for', rule, {
       filename: 'test.vue',
       code: '<template><div><div v-for="(item, index) in suggestions" :key></div></div></template>',
       errors: ["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."]
     }
   ]
 })

tests/lib/rules/require-v-for-key.js

@@ -38,18 +38,27 @@ tester.run('require-v-for-key', rule, {
     {
       filename: 'test.vue',
       code: '<template><div><custom-component v-for="x in list"></custom-component></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><template v-for="x in list"><div :key="x"></div></template></div></template>'
     }
   ],
   invalid: [
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"></div></div></template>',
-      errors: ["'v-for' directives require 'v-bind:key' directives."]
+      errors: ["Elements in iteration expect to have 'v-bind:key' directives."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list" key="100"></div></div></template>',
-      errors: ["'v-for' directives require 'v-bind:key' directives."]
+      errors: ["Elements in iteration expect to have 'v-bind:key' directives."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><template v-for="x in list"><div></div></template></div></template>',
+      errors: ["Elements in iteration expect to have 'v-bind:key' directives."]
     }
   ]
 })