- [Instructor] In this video we'll create a new component
that allows us to view an individual message,
and we'll be able to access that individual message
by passing in the ID as a route parameter in the URL.
We will also be able to access the individual message
by clicking on it in our Messages list.
So let's begin by creating a new component.
I'll start by copying the NewMessage component
and pasting it in to create a duplicate.
Then let's rename that to simply Message.
Now if this naming convention confuses you
between Message and Message feel free
to change it to whatever you like.
Just be mindful of any future references to this component.
Next I'll modify the title on line five,
and I'll just change it to Message.
And we won't need a form since
we're not submitting anything.
So I'll get rid of that between line seven and line 16,
and instead I'll just display the message body.
So let's save out our new component,
and let's add a route for it.
So I'll copy line 17 and paste it below.
And I'll change the path to just Message
and the component to Message.
Then I'll copy line nine and paste it below
and make the modifications.
And then let's add a comma to line 18.
Now that we have our message route
let's go ahead and open up our store.js
and create a new getMessage action.
So below our NewMessage action on line 24
let's add a new action.
This will also be async,
and I'll call it getMessage.
And it will take in a commit as usual.
And then let's simply copy line 21 and line 22
and paste in our new action
as a URL parameter to the backend.
So when we make the getMessage call to our store
we'll need to pass a parameter with that ID.
And then we'll receive it on this end.
So I'll simply pass in id.
Then I'll change the string on line 31
to a template literal.
So I'll remove the double quotes
and replace it with back ticks.
Now we can pass along our ID.
So I'll add a slash to the end of messages.
I'll use a dollar sign,
a curly bracket, and I'll pass in the ID.
Let's save that.
Now let's go to our backend
and then create that end point.
So I'll open up server.js.
And I'll copy our app.get messages
between line 13 and line 15 and paste it below.
Then we'll modify the route slightly
by adding a slash colon and id to specify
that we'll be receiving an ID in the URL.
Now let's do a quick test and console.log
the request dot parameters, or params for short,
dot id, which correlates to the ID on line 17.
Let's save that and give it a try.
So let's open up a new browser tab,
and we'll use localhost
port 3000
messages and then an ID.
And we can see that we're getting the value one,
which I passed in as a URL parameter.
So now instead of sending a list of messages
we'll send back a single message
by selecting the index as the ID from the array.
And in here I'll just pass in
the id.
And I'll get rid of the console.log.
Let's save that and give it a try.
So back in the browser tab
if I refresh messages one
we should see our second message,
since zero is our first.
And so it's working.
So now let's go back to our frontend
in our Message component.
And above our methods property we'll add a created function.
Then I'll copy line 27 and paste it on line 22
in our created function.
And I'll change the action from newMessage to getMessage,
and let's hard code the ID to one for now.
And I'll also get rid of our methods property
since we no longer need that.
Let's save that.
So inside our web app
let's go over to network.
And we should see a request with the ID one being made.
And we can see the request URL under the headers tab
and in our response we see our second message.
And so that's working.
At this point, all we need is to get the ID
from the web app URL and pass that along.
So instead of one we'll use this.$route.params.id.
And then finally, to allow our message component
to take in a URL parameter,
we'll open up main.js,
and we'll need to modify the route on line 19
to support a parameter.
So I'll add a slash after message,
then a colon and id.
And that's actually very similar to what we have set up
in express for our route parameters.
So let's give that a try.
In our URL let's add an ID.
I'll add zero.
And then in our Network tab
we can see a request was made for zero,
and the response is the corresponding message.
So now let's get this message and display it.
So now in our store.js let's modify
our new getMessage action.
First thing we need to do is get rid of
a creating messages variable
and get rid of our commits since
that doesn't make sense in this case.
And finally, instead of awaiting the axios.get call
inside here let's just return it.
And now in our component
we can set this.messageBody to await
and wrap that so we get the data.
And of course, the created function needs to be async
since we're using await.
Let's save that and give it a try.
And we can see it's already working.
And our message is being displayed.
But the formatting on the text looks a bit off.
So let's fix that.
Let's wrap our messageBody
with a v-card-text.
Let's give that a try.
And that's looking a lot better.
The last thing I'd like to do is when we click on
each individual message we show it using our new component.
So back in the frontend project
let's open up Messages,
and then on line eight instead of click
we'll use to and we'll specify message for now.
Let's save that and give it a try.
We can see we're still getting the hover effect.
But in the link URL preview on the bottom left,
you can see we're getting the message text as the URL.
So if I click it, instead of message
we're going to the actual message text,
which is not what we want.
So let's change this to a literal
by wrapping it in a single quote.
Now we always end up in our message route.
And now we just need to specify the ID.
And in this case it's simple since it's just the index.
So we'll need to pass along the index with our v-for.
So I'm going to wrap this in parentheses
and then pass in our index as the second parameter.
Then at the end we'll add a slash to our message.
And then we'll add plus index.
Let's give that a try.
So if I click on the first message,
we can see we're seeing the text
and our URL is correct.
And it's as simple as that.
And even though this video was slightly longer,
we accomplished a great deal in a short amount of time.
So our app now allows us to browse
through our messages showing the individual message
as well as creating a new message,
but we have no idea who wrote what message.