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.
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.
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.
Now, try to refresh your browser and look for the output. Notice how easy the data was fetched in the table.
where Things is an array of objects, however we can do it in a shorthand method and it will look like this;
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.