List Rendering — Vue.js | vue data array
Wecanusethev-fordirectivetorenderalistofitemsbasedonanarray.Thev-fordirectiverequiresaspecialsyntaxintheformofiteminitems,whereitemsisthesourcedataarrayanditemisanaliasforthearrayelementbeingiteratedon:jsconstitems=ref([{message:Foo},{message:Bar}])jsdata(){return{items:[{message:Foo},{message:Bar}]}}template
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:
jsconst items = ref([{ message: Foo }, { message: Bar }])jsdata() { return { items: [{ message: Foo }, { message: Bar }] } }template<li v-for="item in items"> {{ item.message }} </li>Inside the v-for scope, template expressions have access to all parent scope properties. In addition, v-for also supports an optional second alias for the index of the current item:
jsconst parentMessage = ref(Parent) const items = ref([{ message: Foo }, { message: Bar }])jsdata() { return { parentMessage: Parent, items: [{ message: Foo }, { message: Bar }] } }template<li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li>Parent - 0 - FooParent - 1 - Bar
...