Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

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.