polish template v-for error report

[HerringtonDarkholme]

Fix #164, don't report error when nested v-for refers iterator.
Do report error when nested v-for doesn't refer iterator.

Supersede #167

[armano2]

checkKey is not always called with 4 parameters

[HerringtonDarkholme]

labeled as optional

[mysticatea]

Thank you for contributing!

I think that this fix should be recursive. The v-for might be nested 3 times or more.
[email protected] has the relationship between variables and references, I think we can use it. For example:

/**
 * Find `VElement` node in the ancestor of the given node.
 * @param {Node} node The leaf node to find `VElement` node.
 * @returns {VElement|null} The found `VElement` node or null.
 */
function getElement (node) {
  while (node != null && node.type !== 'VElement') {
    node = node.parent
  }
  return node
}

/**
 * Check whether the given attribute is using the variables which are defined by `v-for` directives.
 * @param {VDirective} vFor The attribute node of `v-for` to check.
 * @param {VDirective} vBindKey The attribute node of `v-bind:key` to check. This can be a nested `v-for` directive.
 * @returns {boolean} `true` if the node is using the variables which are defined by `v-for` directives.
 */
function isUsingIterationVar (vFor, vBindKey) {
  if (vBindKey.value == null) {
    return false
  }
  const variables = vFor.parent.parent.variables

  return vBindKey.value.references.some(reference => {
    // Check only references which are resolved to `v-for` variables.
    if (reference.variable != null && reference.variable.kind === 'v-for') {
      // OK if the resolved variable is defined by the given `v-for` directive.
      if (variables.includes(reference.variable)) {
        return true
      }

      // Otherwise, it might be defined by a nested `v-for` directive.
      // Check whether the nested `v-for` directive is using the variable of the given `v-for` directive recursively.
      const element = getElement(reference.variable.id)
      const nestedVFor = element && utils.getDirective(element, 'for')
      return nestedVFor != null && isUsingIterationVar(vFor, nestedVFor)
    }
    return false
  })
}

[mysticatea]

Test cases:

valid

<template v-for="x in xs">
  <template v-for="y in x.ys">
    <li v-for="z in y.zs" :key="z.id">
      123
    </li>
  </template>
</template>

https://jsfiddle.net/5s00Ln4t/1/

invalid

<template v-for="x in xs">
  <template v-for="y in a.ys">
    <li v-for="z in y.zs" :key="z.id">
      123
    </li>
  </template>
</template>

<template v-for="x in xs">
  <template v-for="y in x.ys">
    <li v-for="z in a.zs" :key="z.id">
      123
    </li>
  </template>
</template>

<template v-for="x in xs">
  <template v-for="y in x.ys">
    <li v-for="z in x.zs" :key="z.id">
      123
    </li>
  </template>
</template>

[HerringtonDarkholme]

Hmm, recursion might be too heavy. I will try some other solution.

[HerringtonDarkholme]

I have pushed a new checking method. The basic idea is if child has a v-for, only check if it has used parent iterator. If yes, we can delegate other tests to child v-for. If not, we need to apply old checking logic to descendant.

This checking is top-down. I think it might be clearer.

[mysticatea]

Looks good to me.
Thank you!

[HerringtonDarkholme]

Thanks!