Let's code our first simple Vue project.

For the rest of this part of the course, we'll be creating and

accordion menu of different pieces of media, books, videos and streaming videos.

Imagine that this is the front end for a public library.

Libraries don't just deal in books these days, but in all sorts of media,

magazines, DVDs, streaming videos, CDs, Ebooks and more.

So we're going to build a way to filter items by type and

this filter will dynamically populate with different media items based on our data.

We'll also be able to click any piece of media to display more information about

that piece of media.

And program the arrows to point up or

down to indicate whether a specific accordion item is open or closed.

So here's what we're starting with.

To follow along, download the project files, and

open up the folder called accordion.

Let's take a look at app.js.

We have here an array of objects called media.

Each object has a title, description, type, contributor, and

a property called showDetail,

which is a Boolean, much like in the bookDetail example we looked at earlier.

Below our array of objects, we have a Vue instance attached or

mounted to an html element with an id of media-list.

Notice that we've set the array of media objects

to the property, mediaList.

In the HTML, we have an unordered list containing a single item.

That item contains a heading tag and two paragraph tags surrounded by a div.

We're going to use a structure to display an ad functionality to

any number of media items.

We also have a select menu that currently contains one default option.

Let's start by looping through each object in our array of objects and

displaying the data.

We'll loop through our array of objects in pretty much the same way we did

in the last video.

In this case, the data we want to loop through is called media-list.

So, I'll put a v-for directive on the list item.

And inside of the v-for directive, I'll say media in mediaList.

Remember, media here represents each object in our array.

Let's put media in curly braces inside of the heading 3 tag to see what we get.

If we take a look at this in the browser, you can see that between the heading

3 tags, we're actually displaying the entire object.

So we know that everything is hooked up correctly, but

this format isn't super useful quite yet so let's fix that.

First, let's take a look at our Vue instance in our Vue Dev tools.

I'll open up dev tolls by right clicking anywhere on the page and

selecting inspect.

And then I'll choose Vue from the top menu and then I'll click on the root instance.

If we expand mediaList here, we can see each object,

along with its keys and values.

In our Vue template,

we can access any of these values as we would any object with dot notation.

Let's go back to our template and

display just the title inside of the heading 3 tag.

To use that notation inside of a Vue template,

I'll need to use whichever alias I've used here to refer to each individual object,

followed by whatever the property is called.

So, if I want to access the title property,

Then I'll say, media.title.

Let's save and take a look at this in the browser.

Great, we're displaying each individual title instead of the whole object.

Back in our template, let's add the description and contributor to each item.

I'll replace Media Description with media.description.

Now let's take a look at this again, and awesome.

Now you can see with just a little bit of code,

we're printing out some nicely formatted content.

Now let's quickly add the hide and

show functionality like we did in an earlier video.

In fact, I encourage you to pause the video for a moment and

see if you can set it up for yourself.

I'll leave the link to the video in the teacher's notes if you want to review.

That'll remind you how I did it and

also show you an additional way to get the job done.

Note that last time we put our click event on the h3.

But in order to preserve this nice formatting, and make our accordion menu

that much more user friendly, we'll want to program main accordion to open and

close whenever the user clicks anywhere on the list item.

Don't worry if you got stuck, sometime you have to see something a couple of times

before it sticks, and that's perfectly okay.

In our Vue template,

I'm going to add a v-show directive to the div surrounding the two paragraph texts.

In the quotes, I'll access the showDetail property using .notation.

Remember, for each object in the array, Vue is going to look at the showDetail

property and show or hide the detailed information based on whether or

not show detail evaluates to a true or false value.

To ensure that this is working we can look in Vue Dev-tools.

Access an individual object and toggle show details on and off.

But first, let's remember to refresh.

There we go, now it's working great.

The details are showing and hiding in real time.

Now, we just need the same thing to happen on click.

Back in our template, let's add a click event to the list item.

As we did in an earlier video, we'll say v-on:click,

and then whatever the value of showDetail is,

we will change it to the opposite value.

See if this works, and it does, fantastic.

However, this is getting a little long, so

I'd like to move this logic over to its own function.

So I am going to go ahead and cut this.

And we'll move it into a method called toggleDetails.

I'll go to app.js, And below data, create a new methods object.

Inside that we'll add a property called toggleDetails, And paste our logic in.

Let's check it out, and oops, we have a problem here.

The problem is that Vue actually doesn't know anymore which

list item we're referring to.

How can we let Vue know which list item we've clicked on so

that it knows which item to open and close.

Well, because we're looping through a list

we need a way to tell Vue which object we're referring to.

So we can pass media as an argument into the click event.

Let's save, go to app.js, and I'll add a parameter called media to this method.

And inside the function, all console.log(media), just so

it's extra clear what we're doing here.

Now let's look at this in the browser.

Open up the console.

Looks like we forgot an s here.

Great, now it's working and you can see that each time we click on a list item

it's logging the specific object that we clicked on.

So using a parameter here gives us access to

all the information we need to work with the object, inside of the method.