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.
Top comments (0)