- [Instructor] In this video, we will take a look at
sending our new message once we submit it
from our NewMessages component into our Messages component,
so we can automatically display it.
There's several ways to achieve this,
the most complex being a three-component solution.
So our parent component that contains both the NewMessage
and Messages component
So when a user types in a new message and hits Submit,
the NewMessage component will emit an event
that a new message was submitted.
The parent component, in this case, the app component,
will then react to that event
and then tell our Messages component what the message was.
A simpler solution is just to emit an event
from our NewMessage component globally,
which then our Messages component listens to directly,
bypassing the parent component.
So let's take a look at how to do that.
So we'd like to emit a global event
when we hit our Submit button.
So below our axios.post call on line 32,
let's add a new line.
and we'll call the event newMessage
and we'll supply it a value, which is this.messageBody.
let's register it to that event.
So we'll use again this.$root.on
to register.
And for the first parameter,
we'll provide the name of the event,
which we called newMessage.
And then the data we supply, which is our newMessage,
will pass in with an inline arrow function
that takes in a message.
And then we'll simply push that newMessage
to the message list.
So let's give that a try.
So I'll type in a new message called event.
I'll hit Submit and here we can see
it's being displayed in our messages list
and so it's working.
But there's an obvious problem at this point.
What if our backend server was not running?
So I'm actually going to shut it down.
So I've shut down the server.
I'm going to refresh the page
and we shouldn't see anything but the preset messages,
which actually, I'm going to get rid of.
So back in our front-end, under the Messages component,
let's just set it to an empty array.
That way, if our server's not working, we know for sure
because there's no messages being displayed.
So if we try to submit a new message,
it shouldn't be working because our server's not working.
And that's what we're seeing,
but we're also getting the error.
And since that error is being thrown,
it's causing the rest of our code not to get executed.
So what I'm going to do is copy line 29 through 31
where we register to our event and paste it above
our axios.get call.
So now, back to the obvious issue.
Our server's not running and so we shouldn't be able to
add a message to our message list.
But if I hit Submit, we can see that's working.
So the ideal solution is that
we only add a new message to the message list
when our backend says it was actually added to the backend.
So let's go back and restart our server.
And then on our front-end, in the NewMessages component,
we probably shouldn't emit this newMessage event
as soon as we hit the Submit button,
but instead emit it when the server responds
to the axios.post.
So to do that, we'll use the same async await technique.
So I'll set line 31 to async.
Then I'll create a variable with let called msg
And just like before, I'll wrap this
in order to get the .data.
So now, the data of the axios.post response
is set in our new local msg variable.
And at this point, I can emit that
with our NewMessage event.
Now, if for some reason this call fails,
we'll need to wrap these two lines in a try-catch statement.
And so I'll move these two lines.
And then I'll just simply console.error
the error message if there is an issue.
And so if there's a network problem,
we'll no longer emit this event.
Let's give it a try.
So I'll refresh
and let's first try just posting a new message.
And we saw a new message was added,
So let's see what's happening in our network.
So we're getting the response with an object
that has a property Message.
So in this case,
we'll need to type in, on line 37, msg.message
Let's refresh.
Try that again.
you might have had the same issue
with Visual Studio Code that I have
with its auto-correct, with parentheses.
So I originally wrapped this await
in order to access the data property,
but because of the existing parentheses,
it canceled it out and removed it without me noticing,
so I've done that again.
I've saved it.
And let's give it a try.
So back in our app, I'll type in New Message.
And now, it's working.
So let's try that with a server shutdown.
Let's refresh.
You can see we're getting no messages.
And I'll try that again.
And now, we can see that our new message
is not being displayed in the Messages component
when the backend server is shut down
because we're getting an error
and that's triggering the try-catch, which in this case,
stops the event from emitting.
And we can see that we're getting the console.error
that we set up in our code.
So communicating between multiple components
is a good way to pass data around,
but there's an even better, long-term solution.
Let's take a look at how to create the data store next.