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