Create a List Component in Vue.js

Greg Thoman
InstructorGreg Thoman

Share this video with your friends

Send Tweet

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.

Vinicius Reis
Vinicius Reis
~ 4 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
~ 4 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
~ 4 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
~ 4 years ago

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

Alex Krasnicki
Alex Krasnicki
~ 4 years ago

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

Greg Thoman
Greg Thomaninstructor
~ 4 years ago

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

Liza
Liza
~ 4 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
~ 4 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.