| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 | /** * @author Yosuke Ota * * issue        https://github.com/vuejs/eslint-plugin-vue/issues/403 * Style guide: https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential * * I implemented it with reference to `no-confusing-v-for-v-if` */'use strict'// ------------------------------------------------------------------------------// Requirements// ------------------------------------------------------------------------------const utils = require('../utils')// ------------------------------------------------------------------------------// Helpers// ------------------------------------------------------------------------------/** * Check whether the given `v-if` node is using the variable which is defined by the `v-for` directive. * @param {ASTNode} vIf The `v-if` attribute node to check. * @returns {boolean} `true` if the `v-if` is using the variable which is defined by the `v-for` directive. */function isUsingIterationVar (vIf) {  return !!getVForUsingIterationVar(vIf)}function getVForUsingIterationVar (vIf) {  const element = vIf.parent.parent  for (var i = 0; i < vIf.value.references.length; i++) {    const reference = vIf.value.references[i]    const targetVFor = element.variables.find(variable =>      variable.id.name === reference.id.name &&      variable.kind === 'v-for'    )    if (targetVFor) {      return targetVFor.id.parent    }  }  return undefined}// ------------------------------------------------------------------------------// Rule Definition// ------------------------------------------------------------------------------module.exports = {  meta: {    docs: {      description: 'disallow use v-if on the same element as v-for',      category: undefined,      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.7.1/docs/rules/no-use-v-if-with-v-for.md'    },    fixable: null,    schema: [{      type: 'object',      properties: {        allowUsingIterationVar: {          type: 'boolean'        }      }    }]  },  create (context) {    const options = context.options[0] || {}    const allowUsingIterationVar = options.allowUsingIterationVar === true // default false    return utils.defineTemplateBodyVisitor(context, {      "VAttribute[directive=true][key.name='if']" (node) {        const element = node.parent.parent        if (utils.hasDirective(element, 'for')) {          if (isUsingIterationVar(node)) {            if (!allowUsingIterationVar) {              const vFor = getVForUsingIterationVar(node)              context.report({                node,                loc: node.loc,                message: "The '{{iteratorName}}' variable 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'.",                data: {                  iteratorName: vFor.right.name                }              })            }          } else {            context.report({              node,              loc: node.loc,              message: "This 'v-if' should be moved to the wrapper element."            })          }        }      }    })  }}
 |