Vue 'key' Attribute

<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