In this lesson we're going to create a new component.
The question component that we going to use to show the details of single questions.
Considering that as you probably remember to retrieve the details of single question instances we are
using the slugger.
On the on component we are going to make the question clickable using a router linker.
And because we have access to all the probabilities of the single questioning instances we are going
to pass this lag field of each single question as a prop to the new question component so that it can
then be used to retrieve the details of this single question Is this not what it is.
Because it's actually an easier process than one might think.
So let's create a new component question that view and inside of this component let's define template
script.
And also style let's define a name for the component.
You can just call it a question and then let's define it so because remember we need does logger passed
as a prop which is going to be of type String.
We've required it through.
So right now we could just leave it this way.
So yeah I'm going to define a diva.
The root h the metal element.
Class.
Single question.
We have a bit of a margin on top.
Empty too.
Then here I'm going to define another diva container.
For now let's just pass this lug like so so far when passing a prop to our component.
We've always done that from within another component like in the case of the up and dirt.
If you fail we would just use the component inside of the template of the component itself passing down
the values needed for each specific prop.
In this case however things need to be different because you are not including a component directly
inside of another component.
We just want to call a component using your router and then the content of the component will be shown.
Yeah luckily for us view router allows us to create different parts that own so accept parameters in
a very similar way to what we can do inside of the user as told by fire.
So let's define the path for that question component.
First of all I'm going to import it so import question from views question that view.
Yeah.
I'm going to define another path.
Then I can just call question the component of force is going to be question in the path question for
what is less sure call on and slug.
So this is the way you define parameters for your parts and in order to have those parameters passed
as prop to the component you need to define props through what we can do now.
I can also delete this comment.
You still go back to the old daughter view component and yeah we can define router link.
This way.
And then today to proper.
First of all we bust the name of the path which in most cases question and then we also need to pass
firearms parameters is an object.
Have a slug.
It was a question slug so if we now open up Chrome in the OP page we see that each question is clickable.
And if you click in one of em what we get is the slug of the question that has been passed as a parameter.
Let's make these links look a bit better by stating them.
So here we can find a class attribute to a new class.
The question Lincoln and we can now define this class yet to be no
and of course this is to be at its way.
So first of all let's add funds weight balls and then let's make the caller black.
But let's change the caller went when to need with the mouse.
So call on all of it.
And yet you have a special caller prepared for this color combination which is kind of a lighter gray
and you had to we can also define text the quotation as simply known.
And if you now go back to Chrome much better back to the question that you component let's implement
all the code needed to actually make the component useful.
So first of all I'm going to import API service and actually to make it explicit I can also add the
GSA extension once again.
So it's way so we are going to use API service to get the details of a single question from the API
using this slugger.
Therefore here I can define data which is going to return a single question object.
Let us now define methods
we can call the method to get question data.
And yet first of all let and find equals.
I'm going to use the back to excel to define API questions.
And now he added because you are using the back to accept we can add this looks like and these dots
lag of course.
Is this like past is a problem.
So yeah we can now use VBA said to be a function
in the ad below DNA data and considering that we a decent point about only getting the details of the
question itself.
Who can set d not question as data.
Same as we've done here in their home component.
We can use the created life cycle Luca to collect method as soon as the component is created.
So we've the data passed to our question property.
We can now change the content of the template.
Let's add an h1 tag with question content.
The question itself.
Then yeah we can copy the same code defined appear
so that we can show the details of the question author.
And in this span we are using SPSS Glasser author name that is defined yet in the all middle to view
components.
And considering that you are not using scoped there's SEO says classes are also available from the other
components such as Question data view.
And if this is great for example for the code we've defined here in ARPA dot view because we know that
we want to use this font family for the whole application and you also want all the battles of the application
to behave like DSA.
So if this is okay it's not the same finger as reference in a specific class like the ISA from another
component that may turn out to be very confusing later on when trying to modify your application.
So even though the properties are the same let's add code and maybe you can actually also change the
name to question photo sway.
And let's just copy the CSF property to the question not have a component and considering that this
is in fact the question component we can just leave it as of our name.
Let's also add more information that is for example in this case can be very useful to know when the
question was created.
So question though it's created at.
So as soon as the question that a few component is needed once created the get question data method
is called using d end point which actually in this case is to be for what is less API and so on.
And that's because without default what is less clear.
The endpoint is also created based on the actual routes defined in the router though.
J Yes file and therefore forum it's okay because we have a is Lesher.
That's why Yeah we haven't used it but of course it becomes a problem if you try to get data from an
endpoint that doesn't exist such as last question as Lesh API questions and so on.
So if we now go back to Chrome we see that of course the on page you still working and clicking on one
of the links.
This time we get all the details of the question and same thing of course applies to the second question
before finish in the lesson there is one more thing that we need to do because as you can see the title
of the page is still Question Time.
We want however to use the question itself has a title for the window as well.
So let's go back to these wells to your code and yet we can define another method set the page title
which accepts title as a parameter and yet we can simply said document the page itself.
The title as title we can now call this method from here with these dot sets title passing it data.
That content which is the question itself and if we now go back to crawl we can see that the title of
the page is changed.
The same thing happens for another question.
However as you probably noticed the title stays the same.
Going back to the home page and so to fix that we could define an other matter inside of the home component
or considering that the title of the page is static.
It doesn't change dynamically.
As for the question page and considering that we are already using the created life cycle look into
home that component.
We can simply define document dot title as question time and if we now go back to Chrome we see that
the title has already changed and visiting the details of a single question changes the title of the
page accordingly but going back to the home page we still get question time.