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"
/>
Run Example »
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