Getting started with Vue.js - part four

In the fourth part of the course, we will go through how we can render a list of objects.


List rendering

Rendering a list of objects is something that is done in almost every web app out there and that's why it's an important thing to go through. We are going to add a list of tags with interests to the card.

We'll start by adding the array of interests to the data object we already have in our Vue instance.

Vue Hero - Introduction - Vue instance list

After the data is added we need to do some more changes to the HTML card.

Vue Hero - Introduction - List rendering

If you open index.html in your browser now you should see something like this.

Vue Hero - Introduction - List preview

A list of tags should now be listed out under the description. We added a <hr> just to make a little divider between them.

Tip!

The list don't have to be a list of objects, it might as well be a list of numbers, strings or just words.
Vue Hero - Introduction - List rendering tips

PreviousNext

Buy me a coffee

I'm working hard to create quality courses and lessons. Please consider buying me a coffee or three to support my work.