In this lesson, we take a look at one of the most common Vue.js mistakes: forgetting to combine the
:key directive with
v-for. This mistake can cause very bugs that are hard to track down whenever elements or components within a loop contain some internal state and are re-ordered in any way.
💡BTW reordering doesn’t just mean shuffling, it also includes adding or deleting any new items, that cause other elements to change position.
The rule of thumb is ALWAYS provide the
:key directive with your
v-for's no matter what and never use the
index as the key.