Vue 'key' Attribute
Example
Thekey attribute is used onfood-item components to uniquely identify each element created withv-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
Thekey attribute is used with thev-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 withv-for, if thekey 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 thekey attribute is not used, seeThe '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
