- [Instructor] Now that we have the indexes,
it's time to allow people to modify these fields.
So we're going to use something in HTML called
Content Editable, to let us modify
some of these HTML element.
It's pretty easy to do.
So let's go ahead and make this bigger,
and I'm even going to hide this for right now.
What I want to do here is find the span
that has the pet name, and I'm going to add an item here
called contenteditable, and make it equal
to the same thing here, contenteditable.
And then we're going to create an event,
or look for an event, when somebody activate this field,
which will have the pet name in it.
So we'll look for a blur event.
Blur events happen when somebody modifies
one of these contenteditable fields.
And so, what we'll do is emit an event.
This is going to send an event to the parent component,
and the event will be called edit.
This is just a name that we're going to be passing along,
and then we'll pass along a few pieces of information.
We'll pass along the appointment ID,
which is our index that we just created here,
and then we'll pass along the name of the field
that we want to modify.
So here this is the pet name, so we'll pass that along,
and then we'll need to pass the information
about the element that was changed.
So when we click on one of these elements,
the element, itself, has an item called innerHTML,
and we can look for that text as it gets modified.
So to get something from what happened
when somebody blurred the element,
we're going to look for the event information.
And Vue JS keeps track of that in this special
event modifier here.
So we can look, just like we can with regular javascript,
we can look for that event information,
and then look for the target,
and then look for innerText.
We could do innerHTML, but innerText is just going
to give us the text itself.
So that's the information that is going to be
passed along into our event,
and I'll need to do this same thing
for all of the other fields
that I want to be able to modify.
So here I'm going to do that for pet name,
and then also the owner name, or pet owner.
So we'll paste that in here,
and then we'll pass along the pet owner here,
instead of pet name.
And we'll do the same thing for appointment notes.
So we'll paste that,
and this will have appointment notes.
And so once we do that, let's go ahead and save that.
It's going to reformat it a little bit,
and now we need to go into app.view
and go ahead and capture that event taking place.
So we called it edit,
and we'll call in an internal function
that we're going to create, called editItem.
Again, you can call it the same thing.
You could just call it edit if you wanted to,
but I like to be clear that edit is what it's called
when the event is emitted,
and editItem is the local version of it.
So now we'll need to go to our methods section,
and make sure that we add a new method called editItem,
and this is going to be a function.
It's going to receive a series of things,
our ID from our index,
the name of the field, which one we want to change,
in other words, and then finally,
the information that we want to change.
And we're sending all that from our event.
So here, what I want to do is,
go ahead and create a constant to hold the index
that I want to change.
And the reason I'm doing that is
because that index could be changing
at any point in time, so I want to make sure
that I look for an element in the appointments list
with that index.
So we'll use the awesome low dash function called
findIndex.
We'll pass along the current appointment list,
this.appointments, and then we will
look for an appointment ID of ID.
So once we do that, then all we need to do is
call the appointments,
look for the appointment index,
and then look for the field,
and modify the text of that element
so that it contains the text of the new field.
So this is really important that I looked for
the appointment index.
I didn't just try to use the index that we had before,
because it's inaccurate.
Things are going to be resorting,
and we're going to be using search
to modify our display list.
So this is a better way to find the actual appointment
that we want to modify.
Let's go ahead and save that.
Take a look at our application,
and you should note that it does let you edit these fields,
and let's just go ahead and type in some stuff in there.
And then we will go into the Developer Tools
to make sure that things are changing.
It looks like we've got an error here.
Let's check that out.
This is just a connection error.
I think my network is a little bit iffy,
so let's go ahead and clear that out,
and we'll refresh,
and let's try to modify these items.
You'll see that they are changing,
but more importantly, we want to make sure
that we go to the View Developer tools,
and that in the main application,
that element, the appointments,
are also changing in there.
So you can see that these extra Ds that I added
have all been updated in the original appointments list.
So that's the advantage of using a real index
versus just the index that Vue JS generates for us.