Getting started with Vue.js - part four - list rendering

Getting started with Vue.js - part four - list rendering

Published 31. aug 2019 18:56 by Stein Ove Helset

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.

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

Share this post

Comments

Add comment