Common Vue.js Mistakes and How to Avoid Them
Omitting the Key Directive on v-for
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.
Links