Rule Definition
When Vue processes directives, v-for has a higher priority than v-if. So even if we only render elements for a small fraction, we have to iterate over the entire list every time we re-render, whether or not the set of elements and their relevant v-if props have changed. This makes rendering inefficient.

Remediation
Use a computed property, that satisfies the v-if condition, to iterate over

Violation Code Sample

Users def:


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

_____________________________________

<TodoItem
    v-if="complete"
    v-for="todo in todos"
    :todo="todo"
  />

Fixed Code Sample

//Evaluate a computed property:
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

//Iterate
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential CISQ Rule: ASCPEM-PRF-08