Why this matters
When Vue processes directives, v-if has a higher priority than v-for. This can lead to errors because the v-if directive might be evaluated before the v-for has access to the iteration variables.
v-if with v-forNever use v-if on the same element as v-for.
When Vue processes directives, v-if has a higher priority than v-for. This can lead to errors because the v-if directive might be evaluated before the v-for has access to the iteration variables.
Side-by-side examples engineers can pattern-match during review.
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul><ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul>
<template v-for="user in users" :key="user.id">
<li v-if="user.isActive">
{{ user.name }}
</li>
</template>
</ul><ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul><ul>
<template v-for="user in users" :key="user.id">
<li v-if="user.isActive">
{{ user.name }}
</li>
</template>
</ul>From the same buckets as this rule.
All static JS/CSS/font/image files MUST use content-hashed filenames (e.g., app.9c1a7b.js) and be served with "Cache-Control: public, max-age=31536000, immutable". HTML and other non-fingerprinted documents MUST be served with "Cache-Control: no-cache" (or equivalent) to enable conditional revalidation.