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