An introduction to Vue.js - Chapter 4 - List

Series overview

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5

Foreword

Sometime you would like to render a list. This list could be some bullet points, a chart list, multiple content items, ...

But how do we do this actually with Vue.js? This question I will try to answer with you together.

I will always upload the code to this github repository.

Needs

What to we need for a list. Of course we should start with a component.

import template from './list.html';

export default {
    name: 'vg-list',
    template
};

And this component needs although a property to handover the list items we want to render. The property should be required and has the type Array.

(src/components/list/list.js)

import template from './list.html';

export default {
    name: 'vg-list',
    template,
    props: {
        items: {
            type: Array,
            required: true
        }
    }
};

If you do not understand what we did here, I recommend you to read Chapter 2 and Chapter 3.

The template

The actual magic to render the list happens within our template file.

Let us have look how a usual list would look like in plain HTML.

<ul class="list">
    <li class="list-item">List Item 1</li>
    <li class="list-item">List Item 2</li>
    <li class="list-item">List Item 3</li>
    <li class="list-item">List Item 4</li>
</ul>

As we can see we repeat always this li tags with just changing the corresponding text. Happily, Vue provides some API to do this automatically. For that we use the Directive v-for. With v-for you can iterate over an array an use the specific values to render a DOM element or even a custom component. Let us have a look how that initially looks like.

(src/components/list/list.html)

<ul class="list">
    <li v-for="" class="list-element">List item</li>
</ul>

The value of that v-for attribute usually looks like that: <iteratee> in <array>
That actually looks like a simple for-each loop in JavaScript. In our case we want to iterate over our items array and use each item to display it. (Expecting that this array only contains plain strings)

<ul class="list">
    <li v-for="item in items" class="list-element"></li>
</ul>

To display it now we just use the text directive:

<ul class="list">
    <li v-for="item in items" class="list-element">{{ item }}</li>
</ul>

Make use of it

I adapted our hello component by adding a data property to it with a simple array of strings as a value. Moreover I already imported the list component

import button from 'app/components/button/button';
import list from 'app/components/list/list';
import template from './hello.html';

export default {
    name: 'vg-hello',
    template,
    components: {
        [button.name]: button,
        [list.name]: list
    },
    data: () => ({
        items: ['foo', 'bar', 'buz']
    })
};

But how do we get this items array into the list component? If we try to add the variable simply as an attribute as we did before, we should get an error.

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo bar" />
    <vg-list items="items" />
</div>

So that does not work because the value of items is now interpreted as a string (meaning not that items is converted into string but actually the word items is passed). We need to bind that data property to the list. That can be done in two different ways.

Option 1

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo bar" />
    <vg-list v-bind:items="items" />
</div>

Option 2

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo bar" />
    <vg-list :items="items" />
</div>

I personally prefer using the second options since it helps you saving typing. With the bind method you could although pass usual properties or even methods.

If you now build and open your app, I should see your list rendered. Of course we can currently only render an unordered list and not an ordered list but how that we works we will see in the next chapter.

Done

I hope you like the guide. If you have any questions ask them on Twitter or in the comment section. I will try to answer a much as possible. I am happy about any possible feedback.

Next Chapter