Create a List Component in Vue.js
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.
v-model or $refs are both great ways to get the input field!
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"> ??
The optional second argument for v-for is the index of the current item.
document.getElement instead of v-model? not cool.
I understand. In a later lesson we discuss the usefulness of v-model.
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.
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.
Using
ref="itemForm"insted ofid="itemForm"is more eficientconst input = this.$refs.itemFormanother aprouch is
v-modelinstead DOM manipulation.