Create a List Component in Vue.js

Greg Thoman
InstructorGreg Thoman

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

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.

[00:00] 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."

[00:22] 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.

[00:36] 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.

[00:51] 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.

[01:10] 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.

[01:28] 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.

[01:46] 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.

[01:58] 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.

Vinicius Reis
Vinicius Reis
~ 6 years ago

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

const input = this.$refs.itemForm

another aprouch is v-model instead DOM manipulation.

Greg Thoman
Greg Thomaninstructor
~ 6 years ago

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

Jose Manuel De La O Hernandez
Jose Manuel De La O Hernandez
~ 6 years ago

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"> ??

Greg Thoman
Greg Thomaninstructor
~ 6 years ago

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

Alex Krasnicki
Alex Krasnicki
~ 6 years ago

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

Greg Thoman
Greg Thomaninstructor
~ 6 years ago

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

Liza
Liza
~ 6 years ago

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.

john
john
~ 6 years ago

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.