- [Tutor] So now it's time to show
the meeting information on this page.
Before we do that, I'm going to make sure that in app dot view
I'm passing along that information as a prop.
So, right now, all that information is going
into a variable called Meetings
and so I'm going to pass that down into the router
and then I need to make sure that in my Meetings component
that I receive it as a property.
So, we'll add meetings in here
and so now the meeting's informational
will be able to us in here
and we need to find a place to display it.
Now, I've created this special GiST for you
and I'm going to hit this Raw button to make it easier
to copy and then we'll just copy all of this
and this needs to go
right before this last GiST.
Right there.
So, just paste that and this is just some boot-strap code
that will display the list of elements.
So, we need to wire it up a little bit
and we're going to do that right here.
So, to do that, we're going to use a v-for statement.
This is going to create a temporary variable called item
and go through all of our meetings that we've received.
So it's going to go through and get all the information
for the meetings and store each one of them
in a temporary item variable.
We also need to always when we do
a v-for in VJS, specify a key.
That key is going to receive the ID from the database
and that's one of the reasons
we stored it into this ID field.
So now, all this stuff is going to be
repeated a number of times
and here is where I should add the name.
Right?
So, let's go ahead and put in double curly braces there
now that I have the item variable created, that's where
the name will go.
So, hopefully, if we did everything correctly, let's see.
So here's your meetings and it has a few of the meetings
I've created in there and now I can add some icons here, if
I want to, spice up the way that the meetings look.
So, if you remember, I installed the Font Awesome library
a long time ago at the very beginning and in main.js we made
that component available and we imported
all these icons, right here, so we're going to use them
and we'll go back into our meetings, that view file
and I kind of made some placeholders, right here.
So, first though, we need to go ahead
and import that library.
So, in scripts we're going to import
Font Awesome Icon
from vue-fontawesome
and we need to make sure that we
pass this along as a component.
So, components is going to have
a single component called Font Awesome Icon.
So now, we have icons in this meeting's sub-component.
We'll save that and it means
that we can use the icons in here.
So, we can use the Font Awesome Icon component
that we're importing from that library and that's when
it's already been created for us in the library
and all I need to do is pass the name of the icon.
This icon is called trash
and let's save that one, check out our list, can see the
little trash icon right there.
That's pretty cool.
All right, so we can just copy this one
and put it in here
and I've sort of left the names of the icons where they go.
So, let's see.
Oops.
We'll copy this one.
Paste it in here.
And this one's called list-ul, and you can get
the name of those icons
from the Font Awesome website.
So, let's go ahead and in order to show these icons
we need to have a two field.
Right now, these routes are going to link to some additional
pages that we haven't created yet.
So, for right now, I'm just going to send them to the home page
and so we'll just put a two slash here
and let's take a look
and you can see all the icons are appearing.
They're not quite doing anything, yet, but they
are showing up.