Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Vue.js content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Create a List Component in Vue.js

2:18 Vue.js lesson by

In this lesson, we will learn how to iterate over an array in a Vue.js template using the v-for property. We can add to and remove from that list using v-on:click and v-on:keypress.enter.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson, we will learn how to iterate over an array in a Vue.js template using the v-for property. We can add to and remove from that list using v-on:click and v-on:keypress.enter.

Avatar
Jasper Moelker

Thank you for the introduction.

For better semantics and accessibility I think it's better to always use a <form> when collecting user input. This way the form shows up in the accessibility tree. By hooking up to the submit event, a new item is added when the button is clicked, or the user presses enter in the input field, or any other way the form could be submitted. Finally, adding a label to an input field helps clarifying what input is expected. So the template would become something like this:

<form v-on:submit.prevent="addItem">
  <label for="newItem">New dinosaur</label>
  <input id="newItem">
  <button>Add</button>
</form>
In reply to egghead.io
Avatar
alex

Was just about to reply with the same, tried it, and didn't know about the prevent property of the v-on:submit
I have to say it's quite confusing that I don't get the original event inside my function and I need to do a .prevent inside HTML, but otherwise a great tip

In reply to Jasper Moelker
Avatar
Vinicius Reis

Using ref="itemForm" insted of id="itemForm" is more eficient

const input = this.$refs.itemForm

another aprouch is v-model instead DOM manipulation.

Avatar
Greg

v-model or $refs are both great ways to get the input field!

In reply to Vinicius Reis
Avatar
Jose Manuel De La O Hernandez

When iterating over the items list using the for property, shouldn't the order of the index and item be reverse? In the video we have: <li v-for="(index, item) in items"> but shouldn't it be <li v-for="(item, index) in items"> ??

Avatar
Greg

The optional second argument for v-for is the index of the current item.

In reply to Jose Manuel De La O Hernandez
Avatar
Alex

document.getElement instead of v-model? not cool.

Avatar
Greg

I understand. In a later lesson we discuss the usefulness of v-model.

In reply to Alex
Avatar
lnoogn

I was wondering why (index, item) wasn't working for me and I noticed it was because the previous lesson was using V1 of Vue, which I copied from the example Plunkr, and I didn't realise this lesson had switched to V2.

In reply to Jose Manuel De La O Hernandez
Avatar
john

Glad I looked at the Discussions. I was wondering the same and I think he rather flies through the material and really I can get this off the Docs. So your next thought would be why don't you then? Why I commit to a Tutorial site is so I can get a better explanation than the Docs usually give. There is no real explanation of anything.

In reply to lnoogn

Here we have our basic Vue component. Let's get rid of our content attribute and replace it with a list called items. Each item will have a text attribute that we'll set to a string. We'll set this first one to "velociraptor." We'll set the next one to "triceratops." Our last one will be "stegosaurus."

Let's add this list to our template. We're going to get rid of our content div and add a list. To iterate over our items array, we need our templates to make use of the V4 property. We're going to have for item in items.

Each time that iterates, we're going to make use of the item.text property. Let's create a way to add items to this list dynamically. Let's create an input field with the ID of itemform. Then we'll create an add dinosaur button.

We need a way for this button in our template to call a method on our component. In our component, we're going to add a block for methods, and then we're going to add a method called addItem. Here we're going to set the variable input equal to itemform.

After verifying that the input's value is not an empty string, we're going to push an object into the items array with the text attribute set to the input's value. Then we want to clear out that input. Let's hook up our button to the addItem method by adding the v-on:click property to our button.

We'll set that equal to addItem. Let's also allow the user to press enter to add items. We'll do that by using the property v-on:keypress.enter, and setting that to addItem. Now you'll see we can add a T. rex. Let's add a way to remove dinosaurs from our list.

In our item iterator, let's add a button with a v-on:click property set to deleteItem. We're going to need to know the index of the clicked item. The for property takes two arguments, the second of which is an index.

Let's add that index to our deleteItem call, then let's go to our method struct, and add the deleteItem function. We'll pass the index into this method, and then we'll use that index to splice the item out of the items array. We can get rid of these pesky velociraptors, and add a T. rex and a pachycephalosaurus.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?