List Rendering | vue component v-for
MappinganArraytoElementswithv-forWecanusethev-fordirectivetorenderalistofitemsbasedonanarray.Thev-fordirectiverequiresaspecialsyntaxintheformofiteminitems,whereitemsisthesourcedataarrayanditemisanaliasforthearrayelementbeingiteratedon:
We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on:
<ul id="example-1"><li v-for="item in items" :key="item.message">{{ item.message }}</li></ul>var example1 = new Vue({el: #example-1,data: {items: [{ message: Foo },{ message: Bar }]}})Result:
Inside v-for blocks we have full access to parent scope properties. v-for also supports an optional second argument for the index of the current item.
<ul id="example-2"><li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li></ul>var example2 = new Vue({el: #example-2,data: {parentMessage: Parent,items: [{ message: Foo },{ message: Bar }]}})Result:
{{ parentMessage }} - {...