Published on: 24 Dec, 2020

VueJS Template List Binding

Tumblr Digg Google Plus

In this tutorial, we are going to learn how to populate the content using the VueJs template. We will use a for loop method to read the array of a product list and bind it to the UL LI HTML list.

When declaring a VueJS application, there is a template section where we can specify our HTML content template. See below code on how the template works in VueJS.


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			productList: [
				{productId: 1, productName: "Wallet"},
				{productId: 2, productName: "Belt"},
				{productId: 3, productName: "Pants"},
				{productId: 4, productName: "Tshirt"}
			]
		},
		template: `
			<ul>
				<li v-for="product in productList" v-bind:key="product.productId">
					{{ product.productName }}
				</li>
			</ul>
		`
	});
</script>

If you have a look at the above code. We declare an array variable called productList and injected 4 product information. Then in the template section, we populate the productList into a for loop array. Here is how it looks when you open it using the browser.

Demo

To see the live demo, you can click the following link.

See Vue Template Binding in action.

Download

To download the demo file. Please click the following URL link.

Download file.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.