List Rendering in VueJS

Previously, we saw how we can bind data in VueJS.

Now, let’s see how we can renders lists in VueJS.

We will use v-for directive for this. v-for directive allows us to loop through items in an array or object.

We’ll use the same code from the previous post on data binding.

First, let’s add a list of items in our data.

Now we want to render a list using these items.

We will create an list element in HTML and use v-for directive to iterate through the items.

Let’s see how to do that.

v-for directive works with this special syntax item in items. Here items is the source of data array or list and item is an alias for the array element being iterated on.

Now, if you check the output you will see the names as list.

 

Go ahead, click on Edit in JSFiddle and change the list to see the changes.

Hope you have fun with VueJS.

Let me know if you have any questions or suggestions.

Click Here to Leave a Comment Below

Leave a Reply: