- [Instructor] In this video,
we'll modify our Edit Student component
so that it works with the first
and last name changes we made.
Also, notice that when I go to Edit Student,
there is an http request made
in the Network tab.
And so each time we go to Edit Student,
it asks for that student data once again
even though we already have it in our STUDENTS LIST
in our data store.
So that's something we can improve also.
Something to keep in mind is that
if you're working with a web application
that has many updates in a short amount of time,
you might want to keep this as a feature.
So if there are teachers modifying student names
every few minutes,
then it might make sense to pull fresh data
for the student each time we try to edit the student.
But in this case, the reality is a student name change
will be very rare.
So let's begin by implementing a getter
that allows us to get a specific student.
So let's go to our store
and then let's add a new getter below students.
I'll call this getter findStudent
and just like before, we need to take in a state
and this time around we'll also take in an id
since we would like to search by that id.
And then we will use state.students.find
and in here, we'll check if a student.id
matches an id that we're searching for.
And let's also add a comma to the getter above.
And since this is going off screen,
I'm just going to split it up.
And now let's give this a try.
So to test this, we'll go over to Students,
and just above the card on line three,
I'll add two curly braces.
We'll access store.getters.findStudent
and let's pass an id of two.
Since we have three students,
that should be our last student.
Let's go back to our app and here we go.
Our last student, Kevin Bacon, is what's coming up.
So we know it's working.
Let's continue with our modifications.
First I'll get rid of this placeholder line three.
Now let's open up EditStudents.
And in our component, we no longer need the axios call
on line 36 to get the student,
so I'll get rid of that.
It also does not need to be async any longer
so I'll remove that also.
Now we can use this.store.getters.findStudent
and we just need to pass in the id.
Which we can just copy from line 40.
And then we need to save the entire student
and not just the name any longer
since we need both first name and last name.
So I'll change line 32 in our data to student
and then line 36 to student as well.
Now let's scroll up and on line 12,
instead of name we'll use student.firstname
and we'll change the label to First Name also.
Let's give that a try.
So I'll refresh.
And in our Console, we're getting a couple errors
telling us that student is undefined.
So let's think about what's happening.
Our component is being created
and we're trying to find a student,
but maybe our axios call to get the students
to populate the STUDENTS LIST in our data store
has not finished yet.
And so we can no longer set it on created.
Instead we'll have to use a computed.
So below created, let's add that.
And let's add a student function.
And in here we'll return the above that I copied
from line 36.
And we can also get rid of student on line 32
since it we'll compete with line 36.
So let's give that a try.
And we're still getting that error.
So it's still unable to find the student.
But we know that the STUDENT LIST or array
in our data store should be populated by now.
And I actually just made a typo on line 12
in our firstname, so I'll just put that uppercase N for name
and let's give that another try.
But as you can see we're still getting a Console error
saying student is undefined.
So let's go back to our store.js
and on line 14 you can see
I used a strict comparison operator.
And there's a problem with it.
Since we're getting a URL parameter,
that's coming in as a string
and so we're actually comparing the id that gets passed
into here, which is a string,
against an integer.
And because it's a strict comparison operator,
it won't pass.
So if we switch back to the regular comparison operator,
it will allow that to pass.
So let's refresh.
And as you can see, we're getting the FirstName.
But, we're also getting errors.
But if we go back to our STUDENT LIST, refresh,
and then click on a student to go into Edit Student,
we can see we're not getting an error.
It's only when we refresh on Edit Student
that we're getting the error.
So what's happening is,
our computed is trying to trigger
before the student data is loaded
and so it's searching for a student in an empty list
and returning undefined
because it couldn't find the student.
But then once it loads, it tries again with the computed,
and gives us the student.
So a solution would be to pause our component
from loading until all of the data we need for it
is finished loading.
Keep that in mind because we'll have to come back to that.
But for now, let's add the last name input
to our Edit Student.
So I'll copy line 12, paste it below.
Then I'll make the modifications for last name.
Let's give that a try and we can see it's working.
So let's go down to line 42
where we submit the name changes using axios
and we need to modify this so that it's
with first name and last name instead of just name.
And instead of .name, we'll use .student.firstName.
And we'll do the same for last name.
Let's save that and give it a try.
So I'll modify the last name
and if you noticed, our changes propagate
to and from our store back into the STUDENTS LIST.
And it updates immediately
which was one of the goals for our app.
And that was just the natural consequence
of our reactive programming
that we've done with ViewX.
So, once we hit SUBMIT, if we go back
to the STUDENT LIST, refresh,
we can see that it did make the changes.
Next, let's deal with this error that we get
when we refresh the web app while in Edit Student.