FREELessons: 10Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Conditionals and Loops

In this lesson, you will learn how to use conditionals and loops in Vue, using directives that we haven’t yet discussed.

Useful Links

2.6 Conditionals and Loops

Hello and welcome back. In this lesson we're going to talk about conditionals and loops in Vue. And we're gonna be using directives to create these conditionals and loops. So we're going to start with a conditional because they are pretty straightforward. Let's say that we wanted to test a certain condition for true or false. If it was true then we want it to show this text here. If it was false then we don't want to show that text. So this text is going to be that h4 tag there for our Featured Items, just inside the menu-items section. Now, before we get any further, you can go ahead and open up our starting pen here. You can find the URL for that in your course note for this lesson. And you'll notice that when you open that up, that some things have changed, especially in the JavaScript section. In the JavaScript section, we now have this menuData variable which contains an object which contains an array, excuse me, of products. So you'll notice this array is indicated by the opening square bracket, and it's an array of objects. So each object is contained within curly brackets, and they each have a name, description, price, itemID, and imageURL. And we'll get to these items in more detail when we start talking about loops in just a moment. But I just wanted to show you that this particular file is a little bit different than what we've created so far. So what I wanna do is I wanna go down to the bottom of our JavaScript. And before we get very far let me go ahead and click on the Fork button to create a new copy of this so that we don't save over the old copy. And then in our JavaScript, I'm gonna scroll down to the very bottom where we have this view instance that we have created in stored in my menu. Here, we're pointing to the menu-items element, and our data object is simply this menuData variable that we've created. I'm gonna go into this menuData object, and before our products property here, I'm gonna create another property called showSubtitle. You can give this whatever name you want to. But this is going to be a boolean value, a true or false value. And you can either use some kind of expression to determine this value, but in this instance, I'm just going to set it to a value of false, and you will notice I have a comma at the end. So we have this boolean value, and then we have this products array. So it's this boolean value I want to take a look at first. We're gonna look at that boolean value. If it's true, we're gonna show this text. If it's false, we're not gonna show it. So we're going to jump into HTML, and the way that we do this is by using the v-if directive. So if we jump into this particular h4 element, go into the opening tag for that h4 element, the way we do this is we type v- and then the word if, and then we're simply going to set that equal to the property name that we created. And that property name, if you remember in JavaScript, is showSubtitle. So I'm gonna copy that, and I'm just gonna paste it here. And you'll notice that our title goes away because that value is set to false. So what this v-if directive is doing is it's looking at this property. And if that property turns out to be true, we're gonna show this particular element. If it turns out to be false, we're gonna hide it. So if we simply come down here to our JavaScript, change showSubtitle to true you'll notice that it shows back up. So that's conditionals, those are very easy to accomplish using this v-if directive. And in the second directive I wanna talk about is the v-for directive which allows us to create a loop based on an array. And it's this products array that I want to loop through. And right now, we have these products hard coded, right here. They're all hard coded if you look in your HTML, you can see them all listed out there. Now the images we are going to have to change the way we do those because right now we just have this empty card-img div, and those images are taken care of in our CSS. We have nth-child(1) has a certain image applied to it, nth-child(2) has a different image applied to it, so that's not going to work for us. Instead of doing that, we're going to use the v-bind directive to create a style attribute on this div here. And we already have these same image URLs in our JavaScript now in your starting file here. So those image URLs are already there for us, we just need to take advantage of them. But before we can take advantage of them we need to change some things in our CSS. So I'm gonna get rid of all of these card-img rules. We have the nth-child(1) card image, nth-child(2), nth-child(3). So I'm just gonna get rid of all three of those. And we're gonna move the generic rules that we need inside this card image rule up here. So I'm gonna get rid of those three nth-child rules. And then I'm gonna copy a few CSS properties and paste them in here. And we've already got the width and height of our images defined here in this card image rule. And now we've also added a background color, position, background repeat and background size. So now all that's left is to throw in the actual background image URL and then this should show up fine. So we'll get to that once we fill out our loop a little bit. But now we've got our CSS where we want it, so let's take a look at our JavaScript. In our JavaScript data object, which is this menuData variable as we've already discussed, we have this property called products. And that property is simply an array of objects. And we can loop through each of these products using this products array. And the way we do that is using the v-for directive. So I'm gonna go into our HTML, and right now we have a few different cards here. And if we collapse these, we can see all three of those cards. Well, we're gonna loop through and create these cards dynamically. So I'm going to take these last two cards. And I'm just gonna delete them. So now we only have one card here. And this card is where we're gonna put the v-for directive. So this card element has our image, it has our price, our title or name, and our description as well as some other items. So for this card, I'm gonna create a directive called v-for, and I'll just type this out and then explain what we're doing here. So we're gonna say v-for product in products. So products, you might recognize is the name of this item right here, inside of our data object, it's the name of the array that we're going to loop through. Product is just another variable name that we've made up, and now inside this div, inside this card div we can refer to this name product to point to the different data attributes within that product. So we can point to our name, description, price, itemID, and imageURL by pointing to whatever particular product we're looping through at the time. So for our card image, I'm just going to copy some code and paste it over here. We our class of card image and then right after that closing quotation mark for card image, I'm going to paste this code. Let me expand this out a little bit so we can read it a little bit better. So we're using the v-bind attribute here and we're binding the style attribute, and we want this style attribute to define our background image. So we've started creating this string here, background-image: url and you'll notice all of this first part is contained inside single quotes. And then we're using the plus arrow to concatenate more on this string or to add more onto this string. And what we're adding on to is product.imageURL. So what we're doing here, if we just pretend like these initial opening and closing quotation marks aren't here, what we're doing here is we're basically just building a string. So the first part of this string is everything inside these single quotes. And then we're adding on to it this data here which is the image URL. And then inside these single quotes over here we're closing off the parentheses for the end of that string. So let's see what that looks like in our HTML after it's rendered. So I'm gonna right-click on this image here, click on Inspect, and you'll see that it just pulled that string all together. And did just what we would expect. So we have background image, url, and then the url of that background image. And we can already see that that works fine, because all three images are now showing up as we expect them to. But again, any time we need to point to data within our array, for example here we're pointing to product.imageURL. And here's the imageURL here. All we need to do is point to the word product here, which is the variable name we gave here. And then a dot, and then the name of the property of that product we wanna point to. So as you can imagine, the price is gonna be pretty easy. So you'll notice the price is a number here, not a string. It's 12.99, so we wanna leave this dollar sign here, but instead of 12.99, I'm gonna use the curly bracket syntax. And I'm gonna point to product, which again is this first word here, product in products. And this is another way of saying for each product in the products array we want to do some things here. So here we're gonna point to product.price. So once we type that out, we'll see that our prices are now reflecting the data that's in our JavaScript file. $12.99, $14.99, and $44.99. So, that's our price there and then after that we have the name of our item which inside our products array we can see that that property has a value of name or a name of name and a value of Steak Tacos for the first one. So we could do this either way. We could either do the curly bracket syntax or we could do a v-text here, and set that equal to And then for our description, this one is more likely to have some html since it's a paragraph, so we might use v-html for this one and set that one equal to product.description. And hopefully those will still populate. And it looks like it is pulling in the data correctly. And then we have our button. So let's say that we have this item ID, and that we want our links. Let's say that each one of these items has its own page. So we can click on learn more to go to that page to learn more about that particular item. So maybe we want our links to look like this. So products, or product maybe, forward slash and then the itemID, which might be 111 or whatever that ID is. Well we can handle this the same way we handled this attribute up here, where we strung together the value of our attribute. Except instead of doing a v-bind on the style attribute, we're gonna do it on the href attribute here. So I'm going to paste some Vue code here. We have a v-bind now on the href attribute, and we're stringing together product/ and then the itemID of whichever product we're looking at. So now if we look in our HTML we can right-click on each of these links and inspect them. And we should see a different URL on each one. So the first one is product/111. Our second one here, if we inspect that, is 112 and our third one is 113. So that's how you can use conditionals and directives in Vue. Thank you for watching, and I'll see you in the next lesson.

Back to the top