Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between :key and v-bind:key when constructing a v-for loop?

Tags:

vue.js

v-for

There are examples in the Vue docs using the key keyword use both :key= and v-bind:key= when defining the key in a v-for loop. Is one just syntactic sugar of the other, or do they do different things?

Examples from the docs using both types:

:key

<my-component v-for="item in items" :key="item.id"></my-component>

v-bind:key

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>
like image 454
James Whiteley Avatar asked Mar 11 '19 15:03

James Whiteley


1 Answers

:key= and v-bind:key= are exactly the same.

Source: https://v2.vuejs.org/v2/api/#v-bind

v-bind

Shorthand: :

like image 117
Hammerbot Avatar answered Oct 19 '22 21:10

Hammerbot