- [Instructor] Let's work on the code
that is going to display the list of songs here,
and push the information into this component.
So I'm going to start off by getting rid of this
old HelloWorld.vue file right here,
and then I'm going to modify App.vue
so that the current song is not right now
sort of this hard-coded thing that we have.
So I'm going to set this right now to null,
and then I'm going to create a songs array here,
that is going to have right now all of the songs.
So I've got some data right here.
This URL that I'm going to copy,
just some JSON data with some additional songs.
And I'm going to paste that right here.
And let's go ahead and save this.
Let's go ahead and collapse this,
because it's really a bunch of stuff here.
So we'll click on this little triangle
which is a nice feature of this editor.
And we'll need to go ahead
and only display the currentSong,
if the current-song variable has a value in it,
so we'll do an v-if statement,
and just say if the currentSong exists,
we could just write it like this,
then it's going to display this little box.
And it's not really displaying anything,
but it's not going to give you an error right now
if you try to display something that is not there.
So once we do that we need to create another component,
so let's go ahead and create a new file here.
This is going to be called SongList.vue.
And this is going to require a template,
so let's go ahead,
and we'll use this shortcut that I have called vbase,
that kind of gives you the scaffold for your components.
And I'm going to go over to this URL here,
and grab a bit of bootstrap code.
So I'll copy all of this stuff.
And I'll go ahead and replace this div right here,
with my new template.
And go ahead and save that.
Now we'll need to register this component in App.vue,
which you do by going here to components,
and calling the SongList component,
which also means that we're going to need to import it,
so we'll need to import SongList from components,
and then SongList here as well.
Now that we have that all wired up,
then it means that we can actually
use that component in our template,
so we'll do song-list right here,
and this song-list component,
it's going to need a couple of things.
First of all it's going to need songs,
which I will set to our new songs array.
And then it's going to need to know
the value of the currentSong.
And we'll set that to currentSong as well.
Alright so now let's go ahead and save this.
I don't know if I should be able to see anything quite yet.
You could see that there's like a little bit
of an underline here.
Right now this is just displaying the template,
which is great.
So let's keep going.
We'll go into this songList right here,
and we'll need to initiate this script
that needs to specify a few things,
so export default here.
Name is going to be song-list,
and.
We are receiving a couple of props,
so we passed along songs as well as currentSong.
And this component uses
the FontAwesome library,
so we need to make sure that we also import FontAwesomeIcon.
And that means that we need to use that import command too,
so I'm just going to copy it from this other file here.
Alright let's go ahead and save that.
And now we need to create a loop
so that we can go through each of the songs
and then use this template to display each song.
So right here we're going to use a v-for directive.
This is how you do loops in vue.js.
And we want to go ahead
and go through each one of the songs,
so I'll say song in songs.
And sorry the quotations should be right here and here.
And so I'm going to create a local variable called song
that is going to go through
each of the songs that we're passing through,
and I also need to have an index
whenever you do a v-for statement,
so vue.js gives you this handy default index.
You can also index by some data in your elements,
but this will work just fine for now.
So I do need to add a key here,
that is going to use
that index variable that I just created.
So this is going to give each of these songs an index
that it can refer to them by.
Alright so a couple more things
in this song thumbnail here,
I'm going to add a style attribute.
So this will let us have a background image in here.
So I'm going to say backgroundImage,
and this is just CSS.
When you write CSS in vue.js,
in an expression,
instead of doing the dash that you normally would do here
you use this camel case.
So background image is going to be
just like you would do in CSS URL,
and then I'll use the song temporary variable
as we loop through things,
and get the thumbnail value.
Alright and then I need to also
of course add the expression for the name.
So I'll do song.name here,
and also output the duration.
And also the created_by information here.
This is all from the data that we just imported.
Alright let's go ahead and save that.
And take a look at our application here,
and I'm refreshing.
You can see that we see all of the songs,
and so the last thing we need to do
is make sure that the current song is working again.
So I'm going to quickly create an event,
or an event call,
and that's going to happen,
let's see I've got a couple of these icons right here,
so I'm going to do a click event,
and this is how we pass an event in vue.
We can say when somebody clicks on
any one of these two buttons,
then I want you to emit an event,
so we'll say emit.
We're going to call this event handlePlay,
and then pass along the song information.
So this event needs to get caught by the parent component,
that means that we need to put it right here
and say when that event takes place,
we called it handlePlay,
then I want you to execute a local function
called handlePlay.
Right that means that we have to create that method.
We'll do that here.
Okay handlePlay.
It's going to receive a payload
and you could call this somethin' else if you want to,
but I like to make sure that when we send an event
we usually get some sort of data,
or we often get some sort of data,
so this gets captured in this local variable.
And we'll set the currentSong to be equal to that payload.
So this will set the value of currentSong
whenever we click on the event,
so say if we click on any of these events
then it'll set the current song.
One more thing to make it look nice.
In SongList I'm using this background image
to display the thumbnail.
I'm going to copy that.
I didn't need it before because in CurrentSong,
I wasn't getting all of this data.
But if I add that right here,
then whenever I click on one of these songs,
the photo will also update,
and I'd say just think I clicked on the same thing yeah.
So cool this is workin' really well,
there's more work to do.
But we'll keep on going in the next video.