Vue Loops Using v-for

In this tutorial, we are going to learn another feature of Vue.js which is Loop. The loop in Vue.js is also the same as its event feature where you can integrate it in your html elements. The requirements are the same with the previous tutorial – we need a bootstrap for look and feel and the vue.js file. However, we expect that you already know the concept or the pattern of native javascript looping statement.

To get started, let us make and design our table where we can fetch all of our data later. Let’s say we are building a to do list app. Let us make at least two columns where the first column is the task and the second one is the description. The table will look like the image below.

loops using v-for

Now that we have the table that will serve as the container of the list of tasks, let us open our app.js and declare a dummy list of task. We can do this by following the codes provided in the image below.

loops using v-for

On your html file, go to your designed table and add the loop feature of Vue.js. Then access the object value and display it on your table. You can do this by writing code similar to the image below.

loops using v-for

Now, try to refresh your browser and look for the output. Notice how easy the data was fetched in the table.

loops using v-for

To explain how it was fetched in the table like this, we will create an example of a simple javascript loop and compare with this feature of vue.js. In javascript we write looping statement like this:

loops using v-for

where Things is an array of objects, however we can do it in a shorthand method and it will look like this;

loops using v-for

With the code above, you can get all the values inside each of array objects and fetch it. The same goes in the case of Vue.js. Vue binds it to a specific element and loops with the array of objects we created which is the task list. While the loop continues the same goes with the DOM element that’s why we are able to append the task list and description.

In the next tutorial, we are going to tackle another basic feature of Vue, the Conditional using v-if.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.