Will It Vibe?v-if and v-for on the same element
Part of Code Quality & Syntax, which counts for 20% of the overall score. When this check fires it deducts 8 points from that category, once per scan, no matter how many places it turns up.
What it detects
An element uses v-if and v-for together. The two directives interact with surprising priority (differs between Vue 2 and Vue 3) and re-run the condition for every item, so the filter belongs in a computed property or an outer template instead.
Why it matters
Putting v-if and v-for on one element makes their interaction ambiguous and version-dependent. In Vue 2 the loop runs first and the condition is evaluated for every item each render, which wastes work; in Vue 3 the condition runs first and cannot even see the loop variable, so the template often errors or behaves unexpectedly. The official style guide flags this pattern for both versions.
How to fix it
Separate the two directives. Filter the list in a computed property and iterate the filtered result, or move v-if onto a wrapping <template v-for> or an outer element. Choose the computed-property approach when you are filtering, since it also avoids re-checking the condition on every render.
The paid report includes a ready-to-paste prompt for your AI coding agent for every check it finds, pointed at the exact findings from your scan. See pricing
Does your repo trip this check?
Paste a GitHub URL or drop a project folder. Scans run in your browser and take seconds.
Scan your repo