The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Create a List Component in Vue.js

Create a List Component in Vue.js

2:18
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`.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?