- In this video,
we'll talk about how to use the v-for directive
to iterate over a collection of items
and render a series of related DOM elements.
Our example for this exercise will be a card manager page,
which shows all of the cards in a list
and allows the user to edit them.
So I've created a skeleton page that looks similar
to where we started in chapter one.
For each card I want to show the front and the back
side by side.
So that the user can see the whole deck at a glance.
To start, I'm going to add a div with the class card pair.
And that will allow me to place two child divs inside,
each with class card.
And these will be lined up nicely with Flexbox
with the help of some CSS that's already in our style sheet.
So again, we have our cards array in our data down here.
And what we want to do is iterate over that array,
and render a card pair div for every element.
So we're going to add v-for to this card pair div.
In the syntax is going to be V dash for
and then a looping variable
that we can name whatever we want.
I'll call it card.
And then just in cards.
So we might say for every card in cards
render one of these divs.
And what that will allow us to do,
is to reference this card looping variable
anywhere inside this div that has the v-for directive.
So for the front, we can add V-text is card.front.
And then for the back we have V-html is card.back.
So now when we refresh the page,
we see all of the cards on one screen.
But how can we edit them?
Well, in this course
we're not using any persistent data storage.
So the updates will last only until the page is refreshed.
But we can simulate, editing and saving.
So for this exercise, we'll just make the front editable.
And this card pair div is a repeating element.
So, if we're going to turn one of these into a text field
to edit it in line,
we'll need to know the index
in the array of the card we want to edit.
To access the current index as we're looping,
all we have to do is change card to card comma index.
Or you can even use I or whatever you want to call it.
And then surround these two variables with parentheses.
So now we can add a click handler on the front card.
And all that needs to do,
is record the index of the card that we want to edit.
So I'm going to add a new data property called editIndex,
and we'll just set that to the current index.
We could also have written a method
that took index as a parameter if we wanted to.
So then, let's go ahead and define editIndex in data.
And we're going to initialize it to an invalid index
so that we're not editing anything by default.
So next, I'm going to add another div and using v-if.
We can say that we should render another card div
if the editIndex is the current index.
So this will have class card also,
but instead of card.front,
we'll have a text area with v-model card.front
to allow us to edit it.
And then we're going to add v-else
on the original front card.
And we'll render that if we're not editing.
So let's see what we have so far.
I should be able to click any of these cards
on the left, and it's transformed into a text area
that I could use to edit this content.
To finish this off,
we can allow a user to press enter on the text area
to simulate saving their changes.
So a shortcut for doing this
would be to use the keydown or keyup event.
So we can say, on keydown, the same as V on keydown.
So remember this is the shorthand syntax @keydown
just like @click.
And we can actually add a modifier to target a specific key,
in this case enter.
So keydown enter, and what do we want to do?
All we need to do actually is just reset the edit index
back to negative one.
So now if I refresh,
let's say I want it to change mustache syntax
to add an additional hint.
We'll add the double curly braces.
And when I press enter, my value is updated,
and I'm back to the static version of the card.
In the next two videos.
We'll take a look
at some techniques for managing class and style attributes.