no-use-v-if-with-v-for.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * @author Yosuke Ota
  3. *
  4. * Style guide: https://v3.vuejs.org/style-guide/#avoid-v-if-with-v-for-essential
  5. */
  6. 'use strict'
  7. // ------------------------------------------------------------------------------
  8. // Requirements
  9. // ------------------------------------------------------------------------------
  10. const utils = require('../utils')
  11. // ------------------------------------------------------------------------------
  12. // Helpers
  13. // ------------------------------------------------------------------------------
  14. /**
  15. * Check whether the given `v-if` node is using the variable which is defined by the `v-for` directive.
  16. * @param {VDirective} vIf The `v-if` attribute node to check.
  17. * @returns {boolean} `true` if the `v-if` is using the variable which is defined by the `v-for` directive.
  18. */
  19. function isUsingIterationVar(vIf) {
  20. return !!getVForUsingIterationVar(vIf)
  21. }
  22. /** @param {VDirective} vIf */
  23. function getVForUsingIterationVar(vIf) {
  24. if (!vIf.value) {
  25. return null
  26. }
  27. const element = vIf.parent.parent
  28. for (const reference of vIf.value.references) {
  29. const targetVFor = element.variables.find(
  30. (variable) =>
  31. variable.id.name === reference.id.name && variable.kind === 'v-for'
  32. )
  33. if (targetVFor) {
  34. return targetVFor
  35. }
  36. }
  37. return null
  38. }
  39. // ------------------------------------------------------------------------------
  40. // Rule Definition
  41. // ------------------------------------------------------------------------------
  42. module.exports = {
  43. meta: {
  44. type: 'suggestion',
  45. docs: {
  46. description: 'disallow use v-if on the same element as v-for',
  47. categories: ['vue3-essential', 'essential'],
  48. url: 'https://eslint.vuejs.org/rules/no-use-v-if-with-v-for.html'
  49. },
  50. fixable: null,
  51. schema: [
  52. {
  53. type: 'object',
  54. properties: {
  55. allowUsingIterationVar: {
  56. type: 'boolean'
  57. }
  58. }
  59. }
  60. ]
  61. },
  62. /** @param {RuleContext} context */
  63. create(context) {
  64. const options = context.options[0] || {}
  65. const allowUsingIterationVar = options.allowUsingIterationVar === true // default false
  66. return utils.defineTemplateBodyVisitor(context, {
  67. /** @param {VDirective} node */
  68. "VAttribute[directive=true][key.name.name='if']"(node) {
  69. const element = node.parent.parent
  70. if (utils.hasDirective(element, 'for')) {
  71. if (isUsingIterationVar(node)) {
  72. if (!allowUsingIterationVar) {
  73. const vForVar = getVForUsingIterationVar(node)
  74. if (!vForVar) {
  75. return
  76. }
  77. let targetVForExpr = vForVar.id.parent
  78. while (targetVForExpr.type !== 'VForExpression') {
  79. targetVForExpr = /** @type {ASTNode} */ (targetVForExpr.parent)
  80. }
  81. const iteratorNode = targetVForExpr.right
  82. context.report({
  83. node,
  84. loc: node.loc,
  85. message:
  86. "The '{{iteratorName}}' {{kind}} inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
  87. data: {
  88. iteratorName:
  89. iteratorNode.type === 'Identifier'
  90. ? iteratorNode.name
  91. : context.getSourceCode().getText(iteratorNode),
  92. kind:
  93. iteratorNode.type === 'Identifier'
  94. ? 'variable'
  95. : 'expression'
  96. }
  97. })
  98. }
  99. } else {
  100. context.report({
  101. node,
  102. loc: node.loc,
  103. message: "This 'v-if' should be moved to the wrapper element."
  104. })
  105. }
  106. }
  107. }
  108. })
  109. }
  110. }