Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
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