- [Narrarator] Now we have a status updater that can
read messages from our little API and post new ones.
But to see them we have to reload the page.
In this video we will fix that problem with another
custom event.
Our form component needs to notify the rest
of the view instance that a message has successfully posted.
And we need to act on that information somehow.
We will set up the event first, and act on it afterwards.
Over here in hotel.js I am going to scroll down to
my post status form component here.
And this is where the message has been received
by the API and we need to make sure that it updates.
So down here I am going to emit using this.$emit
some event; I'll call it add-message.
And along with that event I will pass in the new status.
That way when this event fires we will have the data
that we want to stick onto the message list right there.
Now we need to handle this event somehow.
We will do that in index.html
I'm going to jump down to line 50 with control G.
Here is my post status form which is emitting the event.
So I will handle it right here.
Using V-on, checking of course that you abbreviate with the
@ sign.
And I need a name for this method.
So let's call it addmessage.
I'll copy this. And save index.html
Now of course I haven't defined this method yet.
So let's go do that.
I'm going to jump down to the bottom of this file with
command and down arrow.
Here is my view instance.
This is where the event is going to be handled because
this is where the data are.
So this will be called Addmessage.
And it receives the new status.
Now there are different ways to do this.
If we want to be absolutely sure that we are showing
what is on the server we could just retrieve status
messages again by calling this.retrievestatusmessages.
Let's try that.
I'll save this and switch back to Chrome.
Now I'm going to do shift refresh to make sure that my
cached files aren't reloaded by the browser.
So we are going to try this using
the retrieve messages method.
Try posting the update.
Yep. And that worked.
We can do it this way and it does work, but it is a little
inefficient because we are making another network request
so we should probably reset the loaded flag to make
sure that if the network gets slow we can see that something
is loading again.
And we just end up replacing these data, data we already
have for the most part.
So instead, let's just add the message to the list directly.
This will be very fast and involve no network activity.
So I'm going to comment this out.
And instead we will just update this.messages directly.
And we will push our new status right onto the end of it.
I'll save this, switch back,
and I'll do another hard refresh.
We will append directly.
There we go.
No latency whatsoever and it updates.
One small digression.
When view compares component data, it does some
magic to make everything reactive, part of which is
wrapping up the standard methods for mutating a raise
like Push.
I bring this up because if you want to try something else
to append your message onto the end here,
like if you were to say
this.messages.this.messages.length
= new status
it won't work.
This is probably only a risk for long time Java script
developers, but I think it is worth mentioning.
Views magic works on methods like Push, but it will
not pick up the changes if you do it this way.
You can read more about the way that View makes data
reactive in its documentation.
It is pretty approachable and if you run into a situation
where you think this absolutely should be updating
and it's not, there may be some small implementation
detail that is mentioned in the documentation that can
help you figure out what is going wrong.
Specifically the view documentation on list rendering has
more information on this particular issue.
So at this point we have completed
all of the major functionality.
We can post messages, they go up to the API, we are able
to read messages from the API, and we can update
this message list directly
immediately when a new message posts.