An introduction to Vue.js - Chapter 4 - List
Tags: javascript, vue
Published: 2017-09-24 21:21:30

---
title: An introduction to Vue.js - Chapter 4 - List
published: true
description: This is a simple introduction to Vue.js, working with lists and arrays in Vue
tags: javascript,vue
cover_image: http://timrijkse.nl/images/vue-full-guide.png
---

## Series overview

[Chapter 1](https://dev.to/neradev/an-introduction-to-vuejs---chapter-1---basic-setup)
[Chapter 2](https://dev.to/neradev/an-introduction-to-vuejs---chapter-2---components-part-i)
[Chapter 3](https://dev.to/neradev/an-introduction-to-vuejs---chapter-3---components-part-ii)
[Chapter 4](https://dev.to/neradev/an-introduction-to-vuejs---chapter-4---list)
[Chapter 5](https://dev.to/neradev/an-introduction-to-vuejs---chapter-5---conditional-rendering-c97)

## 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](https://github.com/Neatoro/vue-guide).

## Needs

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

```javascript
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`)

```javascript
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](https://dev.to/neradev/an-introduction-to-vuejs---chapter-2---components-part-i) and [Chapter 3](https://dev.to/neradev/an-introduction-to-vuejs---chapter-3---components-part-ii).

## 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.

```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`)

```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)

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

To display it now we just use the text directive:

```html
<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

```javascript
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.

```html
<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*

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

*Option 2*

```html
<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](https://twitter.com/neradev) or in the comment section. I will try to answer a much as possible. I am happy about any possible feedback.


[Next Chapter](https://dev.to/neradev/an-introduction-to-vuejs---chapter-5---conditional-rendering-c97)