v-if directive should use variables defined at v-for appearing on the same element

  • VUE_V_IF_WITH_V_FOR
  • Code Quality
  • Low
  • vue

This rule applies when v-if directive is used on the same element as v-for directive but does not use any variables defined at v-for.

When v-if and v-for directives exist on the same node, v-for has a higher priority than v-if.
That means v-if will be run on each iteration of the loop.

If the v-if condition is independent of v-for, you can efficiently skip the execution of the loop by moving the v-if directive to a wrapper element. It is checked once and the v-for will not be evaluated if the condition is false.

Noncompliant Code Example

View with compliant examples side by side
<template>
  <ul>
    <li
      v-if="users"
      v-for="user in users"
      :key="user.id"
    >
      {{ user.name }}
    </li>
  </ul>
</template>

Compliant Code Example

View with noncompliant examples side by side
<template>
  <ul v-if="users">
    <li
      v-for="user in users"
      :key="user.id"
    >
      {{ user.name }}
    </li>
  </ul>
</template>

Version

This rule was introduced in DeepScan 1.17.0-beta.

See