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.

Note: The application of this rule is limited to projects using Vue 2.x version.

Noncompliant Code Example

<template>
  <ul>
    <li
      v-if="users"
      v-for="user in users"
      :key="user.id"
    >
      {{ user.name }}
    </li>
  </ul>
</template>

Compliant Code Example

<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

• v-for with v-if

• Avoid v-if with v-for