Will It Vibe logoWill It Vibe?
VUE-010Low severity-4 points

Loop index used as :key

Part of Code Quality & Syntax, which counts for 20% of the overall score. When this check fires it deducts 4 points from that category, once per scan, no matter how many places it turns up.

What it detects

A :key is bound to the loop index (index/idx/$index/i). Because indexes shift when the list reorders or an item is removed, this keys the wrong nodes and reintroduces the bugs :key exists to prevent.

Why it matters

Binding :key to the loop index gives Vue a key that changes meaning whenever the list reorders or an item is removed, because every later item shifts to a new index. Vue then keeps the DOM at each position and swaps the data, which is exactly the wrong-row state bug that keys are meant to prevent. This is a heuristic: when items truly have no id and never reorder, the index is an acceptable last resort.

How to fix it

Bind :key to a stable unique property of the item, such as item.id, instead of the index. If items lack an id, assign one when the data is created rather than deriving it from position. Only keep the index as a key for a static list that never reorders or changes length.

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

Related Code Quality & Syntax checks