Vue 'key' Attribute
Example
The key attribute is used on food-item components to uniquely identify each element created with v-for.
<food-item
v-for="x in foods"
:key="x.name"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"
/>
Definition and Usage
The key attribute is used with the v-for directive so that Vue can tell the elements apart properly.
Vue optimizes performance by reusing elements. So when elements are created from an array with v-for, if the key attribute is NOT used, element properties can be mixed when the array gets modified.
For a more thorough explanation, and an example of what goes wrong when the key attribute is not used, see The 'key' Attribute chapter in the Vue tutorial.
Related Pages
Vue Tutorial: Vue v-for Directive
Vue Tutorial: Vue v-for Components
Vue Tutorial: Vue Animations with v-for
