Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Use v-for to loop through an array of objects and add Vue directives to provide interactivity to each and every item in the array.
Review
Dot notation to access a property in an array of objects:
Template
<ul>
<li v-for="item in items">
<a href="item.url">{{item.name}}</a>
</li>
</ul>
Data
new Vue({
el: '#app',
data: {
items: [
{
name: 'Chewie',
url: 'https://www.someurl.com'
},
{
name: 'Archibald',
url: 'https://www.someotherurl.com'
},
]
}
});
Let's code our first simple Vue project.
0:00
For the rest of this part of the course,
we'll be creating and
0:03
accordion menu of different pieces of
media, books, videos and streaming videos.
0:05
Imagine that this is the front end for
a public library.
0:11
Libraries don't just deal in books
these days, but in all sorts of media,
0:15
magazines, DVDs, streaming videos,
CDs, Ebooks and more.
0:19
So we're going to build a way
to filter items by type and
0:24
this filter will dynamically populate with
different media items based on our data.
0:27
We'll also be able to click any piece of
media to display more information about
0:32
that piece of media.
0:37
And program the arrows to point up or
0:39
down to indicate whether a specific
accordion item is open or closed.
0:41
So here's what we're starting with.
0:46
To follow along,
download the project files, and
0:48
open up the folder called accordion.
0:50
Let's take a look at app.js.
0:53
We have here an array of
objects called media.
0:57
Each object has a title,
description, type, contributor, and
1:02
a property called showDetail,
1:07
which is a Boolean, much like in the
bookDetail example we looked at earlier.
1:09
Below our array of objects,
we have a Vue instance attached or
1:13
mounted to an html element
with an id of media-list.
1:17
Notice that we've set
the array of media objects
1:23
to the property, mediaList.
1:29
In the HTML, we have an unordered
list containing a single item.
1:32
That item contains a heading tag and
two paragraph tags surrounded by a div.
1:38
We're going to use a structure to
display an ad functionality to
1:43
any number of media items.
1:46
We also have a select menu that
currently contains one default option.
1:48
Let's start by looping through each
object in our array of objects and
1:53
displaying the data.
1:57
We'll loop through our array of objects
in pretty much the same way we did
1:59
in the last video.
2:03
In this case, the data we want to
loop through is called media-list.
2:05
So, I'll put a v-for
directive on the list item.
2:09
And inside of the v-for directive,
I'll say media in mediaList.
2:17
Remember, media here represents
each object in our array.
2:22
Let's put media in curly braces inside
of the heading 3 tag to see what we get.
2:28
If we take a look at this in the browser,
you can see that between the heading
2:39
3 tags, we're actually
displaying the entire object.
2:43
So we know that everything
is hooked up correctly, but
2:47
this format isn't super useful quite yet
so let's fix that.
2:49
First, let's take a look at our
Vue instance in our Vue Dev tools.
2:53
I'll open up dev tolls by right
clicking anywhere on the page and
2:57
selecting inspect.
3:00
And then I'll choose Vue from the top menu
and then I'll click on the root instance.
3:02
If we expand mediaList here,
we can see each object,
3:07
along with its keys and values.
3:12
In our Vue template,
3:20
we can access any of these values as
we would any object with dot notation.
3:21
Let's go back to our template and
3:26
display just the title
inside of the heading 3 tag.
3:28
To use that notation
inside of a Vue template,
3:32
I'll need to use whichever alias I've used
here to refer to each individual object,
3:34
followed by whatever
the property is called.
3:40
So, if I want to access
the title property,
3:43
Then I'll say, media.title.
3:51
Let's save and
take a look at this in the browser.
3:56
Great, we're displaying each individual
title instead of the whole object.
4:00
Back in our template, let's add the
description and contributor to each item.
4:09
I'll replace Media Description
with media.description.
4:17
Now let's take a look at this again,
and awesome.
4:31
Now you can see with just
a little bit of code,
4:34
we're printing out some
nicely formatted content.
4:36
Now let's quickly add the hide and
4:40
show functionality like we
did in an earlier video.
4:41
In fact, I encourage you to
pause the video for a moment and
4:45
see if you can set it up for yourself.
4:48
I'll leave the link to the video in
the teacher's notes if you want to review.
4:50
That'll remind you how I did it and
4:54
also show you an additional
way to get the job done.
4:56
Note that last time we put
our click event on the h3.
5:00
But in order to preserve this nice
formatting, and make our accordion menu
5:04
that much more user friendly, we'll want
to program main accordion to open and
5:08
close whenever the user clicks
anywhere on the list item.
5:12
Don't worry if you got stuck, sometime you
have to see something a couple of times
5:17
before it sticks, and
that's perfectly okay.
5:21
In our Vue template,
5:23
I'm going to add a v-show directive to the
div surrounding the two paragraph texts.
5:25
In the quotes, I'll access
the showDetail property using .notation.
5:34
Remember, for each object in the array,
Vue is going to look at the showDetail
5:40
property and show or hide the detailed
information based on whether or
5:45
not show detail evaluates to a true or
false value.
5:49
To ensure that this is working
we can look in Vue Dev-tools.
5:52
Access an individual object and
toggle show details on and off.
5:59
But first, let's remember to refresh.
6:07
There we go, now it's working great.
6:13
The details are showing and
hiding in real time.
6:18
Now, we just need the same
thing to happen on click.
6:21
Back in our template,
let's add a click event to the list item.
6:30
As we did in an earlier video,
we'll say v-on:click,
6:36
and then whatever
the value of showDetail is,
6:41
we will change it to the opposite value.
6:46
See if this works, and it does, fantastic.
6:54
However, this is getting a little long, so
6:59
I'd like to move this logic
over to its own function.
7:02
So I am going to go ahead and cut this.
7:06
And we'll move it into
a method called toggleDetails.
7:11
I'll go to app.js, And below data,
create a new methods object.
7:14
Inside that we'll add a property called
toggleDetails, And paste our logic in.
7:24
Let's check it out, and oops,
we have a problem here.
7:36
The problem is that Vue actually
doesn't know anymore which
7:39
list item we're referring to.
7:43
How can we let Vue know which
list item we've clicked on so
7:45
that it knows which item to open and
close.
7:48
Well, because we're looping through a list
7:52
we need a way to tell Vue which
object we're referring to.
7:56
So we can pass media as
an argument into the click event.
7:59
Let's save, go to app.js, and I'll add
a parameter called media to this method.
8:09
And inside the function,
all console.log(media), just so
8:18
it's extra clear what we're doing here.
8:21
Now let's look at this in the browser.
8:29
Open up the console.
8:34
Looks like we forgot an s here.
8:43
Great, now it's working and you can see
that each time we click on a list item
8:53
it's logging the specific
object that we clicked on.
8:58
So using a parameter
here gives us access to
9:03
all the information we need to work
with the object, inside of the method.
9:06
You need to sign up for Treehouse in order to download course files.
Sign up