How to Render Lists in Vue.js

There are the Following The simple About Rendering Lists in VueJs Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop How to Dynamically render a list/array of different components in Vue.js, so the elements in iteration expect to have ‘v-bind:key’ directives for this example is following below.

HTML Part

index.html

<div id="root-instance">
<ul>
<li v-for="pitm in products">
{{ pitm.name }} - ${{ pitm.price }}
</li>
</ul>
</div>

Vuejs Part

index.js

var vm = new Vue({
el: '#root-instance',
data: {
products: [
{name: 'Mobile Air', price: 9898},
{name: 'Laptop Pro', price: 2580},
{name: 'Computer W530', price: 1874},
{name: 'DVD Aspire One', price: 425}
]
}
});

I hope you get an idea about vuejs Rendering Lists.

• This blog post was originally published at: https://www.pakainfo.com

#vue  #vuejs