valid-v-for.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. /**
  2. * @author Toru Nagashima
  3. * @copyright 2017 Toru Nagashima. All rights reserved.
  4. * See LICENSE file in root directory for full license.
  5. */
  6. 'use strict'
  7. // ------------------------------------------------------------------------------
  8. // Requirements
  9. // ------------------------------------------------------------------------------
  10. const utils = require('../utils')
  11. // ------------------------------------------------------------------------------
  12. // Helpers
  13. // ------------------------------------------------------------------------------
  14. /**
  15. * Check whether the given attribute is using the variables which are defined by `v-for` directives.
  16. * @param {ASTNode} vFor The attribute node of `v-for` to check.
  17. * @param {ASTNode} vBindKey The attribute node of `v-bind:key` to check.
  18. * @returns {boolean} `true` if the node is using the variables which are defined by `v-for` directives.
  19. */
  20. function isUsingIterationVar (vFor, vBindKey) {
  21. if (vBindKey.value == null) {
  22. return false
  23. }
  24. const references = vBindKey.value.references
  25. const variables = vFor.parent.parent.variables
  26. return references.some(reference =>
  27. variables.some(variable =>
  28. variable.id.name === reference.id.name &&
  29. variable.kind === 'v-for'
  30. )
  31. )
  32. }
  33. /**
  34. * Check the child element in tempalte v-for about `v-bind:key` attributes.
  35. * @param {RuleContext} context The rule context to report.
  36. * @param {ASTNode} vFor The attribute node of `v-for` to check.
  37. * @param {ASTNode} child The child node to check.
  38. */
  39. function checkChildKey (context, vFor, child) {
  40. const childFor = utils.getDirective(child, 'for')
  41. // if child has v-for, check if parent iterator is used in v-for
  42. if (childFor != null) {
  43. const childForRefs = childFor.value.references
  44. const variables = vFor.parent.parent.variables
  45. const usedInFor = childForRefs.some(cref =>
  46. variables.some(variable =>
  47. cref.id.name === variable.id.name &&
  48. variable.kind === 'v-for'
  49. )
  50. )
  51. // if parent iterator is used, skip other checks
  52. // iterator usage will be checked later by child v-for
  53. if (usedInFor) {
  54. return
  55. }
  56. }
  57. // otherwise, check if parent iterator is directly used in child's key
  58. checkKey(context, vFor, child)
  59. }
  60. /**
  61. * Check the given element about `v-bind:key` attributes.
  62. * @param {RuleContext} context The rule context to report.
  63. * @param {ASTNode} vFor The attribute node of `v-for` to check.
  64. * @param {ASTNode} element The element node to check.
  65. */
  66. function checkKey (context, vFor, element) {
  67. if (element.name === 'template') {
  68. for (const child of element.children) {
  69. if (child.type === 'VElement') {
  70. checkChildKey(context, vFor, child)
  71. }
  72. }
  73. return
  74. }
  75. const vBindKey = utils.getDirective(element, 'bind', 'key')
  76. if (utils.isCustomComponent(element) && vBindKey == null) {
  77. context.report({
  78. node: element.startTag,
  79. loc: element.startTag.loc,
  80. message: "Custom elements in iteration require 'v-bind:key' directives."
  81. })
  82. }
  83. if (vBindKey != null && !isUsingIterationVar(vFor, vBindKey)) {
  84. context.report({
  85. node: vBindKey,
  86. loc: vBindKey.loc,
  87. message: "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
  88. })
  89. }
  90. }
  91. // ------------------------------------------------------------------------------
  92. // Rule Definition
  93. // ------------------------------------------------------------------------------
  94. module.exports = {
  95. meta: {
  96. type: 'problem',
  97. docs: {
  98. description: 'enforce valid `v-for` directives',
  99. category: 'essential',
  100. url: 'https://eslint.vuejs.org/rules/valid-v-for.html'
  101. },
  102. fixable: null,
  103. schema: []
  104. },
  105. create (context) {
  106. const sourceCode = context.getSourceCode()
  107. return utils.defineTemplateBodyVisitor(context, {
  108. "VAttribute[directive=true][key.name='for']" (node) {
  109. const element = node.parent.parent
  110. checkKey(context, node, element)
  111. if (node.key.argument) {
  112. context.report({
  113. node,
  114. loc: node.loc,
  115. message: "'v-for' directives require no argument."
  116. })
  117. }
  118. if (node.key.modifiers.length > 0) {
  119. context.report({
  120. node,
  121. loc: node.loc,
  122. message: "'v-for' directives require no modifier."
  123. })
  124. }
  125. if (!utils.hasAttributeValue(node)) {
  126. context.report({
  127. node,
  128. loc: node.loc,
  129. message: "'v-for' directives require that attribute value."
  130. })
  131. return
  132. }
  133. const expr = node.value.expression
  134. if (expr == null) {
  135. return
  136. }
  137. if (expr.type !== 'VForExpression') {
  138. context.report({
  139. node: node.value,
  140. loc: node.value.loc,
  141. message: "'v-for' directives require the special syntax '<alias> in <expression>'."
  142. })
  143. return
  144. }
  145. const lhs = expr.left
  146. const value = lhs[0]
  147. const key = lhs[1]
  148. const index = lhs[2]
  149. if (value === null) {
  150. context.report({
  151. node: value || expr,
  152. loc: value && value.loc,
  153. message: "Invalid alias ''."
  154. })
  155. }
  156. if (key !== undefined && (!key || key.type !== 'Identifier')) {
  157. context.report({
  158. node: key || expr,
  159. loc: key && key.loc,
  160. message: "Invalid alias '{{text}}'.",
  161. data: { text: key ? sourceCode.getText(key) : '' }
  162. })
  163. }
  164. if (index !== undefined && (!index || index.type !== 'Identifier')) {
  165. context.report({
  166. node: index || expr,
  167. loc: index && index.loc,
  168. message: "Invalid alias '{{text}}'.",
  169. data: { text: index ? sourceCode.getText(index) : '' }
  170. })
  171. }
  172. }
  173. })
  174. }
  175. }