Welcome back! 🤩
Last time we took at conditional rendering withv-if andv-show. This time we will learn how to loop through arrays and objects and create an element for each one of the items in them. We will also apply some of the concepts we have learned before.
v-for
v-for is one of the fundamental directives ofVue.js, and once you understand how it works the extension of what you can build inside your apps will grow exponentially.
v-for is, simply put, afor loop. If you don't yet know what this means, a for loop is a piece of code that gets executed one time per each element in a group - which in turn is usually anArray or anObject.
We're going to start with an empty slate today so that everything we do has a clear purpose. Here's a copy of our baseindex.html file for you to copy and paste into your editor.
<html><head><title>Vue 101</title></head><body><divid="app"></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>constapp=newVue({el:'#app',data:{},methods:{}});</script></body></html>Let's start by creating a simple list, an array, that we can loop to output its content. We will create a property inside ourdata object, calledgames. Feel free to change the titles to your own personal favorites 🙃🎮
data:{games:['Super Mario 64','The Legend of Zelda Ocarina of Time','Secret of Mana','Super Metroid']},Awesome! Now that we have our array set up, let's create a sad and simple<ul> element where will display it. For the sake of example, let's keep it simple for now.
<divid="app"><ul><li>Game title here</li></ul></div>Ok, looking good! Now we have to tellVue that we want to output as many<li> elements inside the<ul> as needed to loop through our whole array.
In other languages, and even in vanilla JavaScript, you may be used to doing something that looks similar to this:
<?phpforeach($gamein$games):?><li><?phpecho$game;?></li><?phpendforeach;?>Where the loopencloses the element(s) it's going to output or print out.
InVue we declare ourv-for directive on TOP of the element we want to loop. Make these changes to your<li> and we'll dissect them after.
<ul><liv-for="game in games">{{game}}</li></ul>Let's take a look.
v-forwas added directly to the<li>, not the<ul>as we saw earlier. This reads: "For eachgamein mygamesarray, please make a new<li>inside these<ul>tags.- Note that
gamesis the property that we added earlier with the array inside ourdata, so we have to use this variable name. - The variable
game(singular) is defined by us, we could useitem,game,titleor whatever we feel like. But be sure to understand that this*game* in gamesis what you will be using as a variable inside your loop. - Finally, inside our
<li>tag we're outputting the contents of ourgamevariable, so while the loop is running for each of our games, this will output the string into the<li>.
Run your app inside the browser, and you should see your list of items being outputted to the screen.
Taking it up a notch
So far, so good?v-for is actually a very simple concept, and this example is super boring. So how about we make things a bit more complicated, by making our array include some objects, and also applying somev-ifs inside our list?
First things first, let's update ourgames property with some more interesting data.
data:{games:[{name:'Super Mario 64',console:'Nintendo 64',rating:4},{name:'The Legend of Zelda Ocarina of Time',console:'Nintendo 64',rating:5},{name:'Secret of Mana',console:'Super Nintendo',rating:4},{name:'Fallout 76',console:'Multiple',rating:1},{name:'Super Metroid',console:'Super Nintendo',rating:6}]},As always feel free to use your own favorite titles. PS. Super Metroid's rating of 6 is not a typo, it's just THAT good - and I'm biased. 😬 Also, Bethesda, you should be ashamed.cough Anyways.
If you run your app this point it will not particularly break, but it will just output the objects in a string format, which is not pretty. In fact, we're going to scratch our<ul> approach completely, and use a<div> to output our information. (Don't worry, it'll still be ugly).
Update your whole<div>:
<divid="app"><divv-for="game in games"><h1>{{ game.name }} -<small>{{ game.console }}</small></h1><spanv-for="star in game.rating">❤️</span><divv-if="game.rating > 5">Wow, this game must be<b>REALLY</b> good</div></div></div>WOAH. Ok, maybe not, but don't worry, you already know everything you need to understand what's happening here.
div v-for="game in games"Same old, we're going to loop ourgamesarray prop and store each game in thegamevariable.h1. Ok, sogameis an object, which in turn holds its own properties,name,console andrating. Inside the<h1>we're going to output the game's *name:game.name. And the console:game.console. As you can see now,v-foris not limited to outputting just a single element as we saw before with theli, but you can actually output as much HTML as you need.- The nested
v-for. So inside thespanelement we actually have a nestedv-forloop (which is TOTALLY ok to do), except it's a little different, we're not looping an array or an object. I didn't LIE to you, maybe just withheld some information - like for example, you can actually loop a numeric value (in this casegame.ratingand the loop will count up from1till it reaches the value of the rating. Simple? - Finally,
v-if. We are going to output a<div>tag inside our loopIF the condition is met, so if and only if the current game's rating is greater than 5. Take a guess which?
Go ahead and run this again in your browser and behold the awesomeness of not bothering with CSS.
What if I don't need a wrapping DIV?
If at any point you find yourself making a bunch of<div> elements simply to wrap up yourv-for loops, there's a special HTML tag you can use to help your case.<template></template>
If you, for example, remove the wrapping<div> and change it for<template> take a look at your developer console and you'll see that the<h1> and<span> elements are not wrapped by anything.
<template> is special, becauseVue will treat it as a wrapper element but it won't be rendered into the HTML when we execute it, so you can safely use it to wrap a bunch of other elements logically for the loop without affecting your markup.
The :key attribute
One final thing that I purposely left for the end. The:key attribute.
When you are looping through elements withv-forVue.js has NO clue how to track your elements for reactivity, because it can't "tell apart" one object from the other. What this means for you is that sinceVue can't do this, it will re-render the WHOLE section of the page that is being created by this loop. In our case it's a very small section and the performance hit would probably be minimal, but it's something that you should keep in mind - and just do it for best practice.
Now, how do we use it?
:key expects some string it'll use to "name" or "track" the element, so we need to give it a unique identifier. In the case of ourgames it's simple, we can do:
<divv-for="game in games":key="game.name">I'm pretty certain that we're not going to have the same game twice in this list, so this is pretty safe. Anid if you have data coming from a database is alsoideal to use here.
If you are curious about the intricacies of:key you can always take a look at the documentation.Key's docs
In fact, now that you have gotten this far I can't stress enough the importance of getting acquainted with the documentation.Vue.js 's docs are impressively good, and very very clear with code examples, the documentation team does a fantastic job to keep them updated and clear - big shout out to all of them.
Final code
Here's the final code, just in case.
<html><head><title>Vue 101</title></head><body><divid="app"><divv-for="game in games":key="game.name"><h1>{{ game.name }} -<small>{{ game.console }}</small></h1><spanv-for="star in game.rating">❤️</span><divv-if="game.rating > 5">Wow, this game must be<b>REALLY</b> good</div></div></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>constapp=newVue({el:'#app',data:{games:[{name:'Super Mario 64',console:'Nintendo 64',rating:4},{name:'The Legend of Zelda Ocarina of Time',console:'Nintendo 64',rating:5},{name:'Secret of Mana',console:'Super Nintendo',rating:4},{name:'Fallout 76',console:'Multiple',rating:1},{name:'Super Metroid',console:'Super Nintendo',rating:6}]}});</script></body></html>Challenge
This time you get a challenge if you wish to accept it. Add a@click listener to the<span> which outputs the game's rating, and increase the ranking by1 with each click for that UNIQUE game. You already know everything you need to achieve this 😉.
Tip: You'll need to pass thegame you're looping to the click function, and inspect it.
Good luck!
Top comments(23)
- LocationHaarlem
- EducationBachelor of IT
- WorkWeb developer at WebConcern
- Joined
Thanks for the tutorial, Marina. Here's my solution:
HTML:
<spanv-for="star in game.rating"@click="increaseRating(game)">⭐</span>JS bit:
methods:{increaseRating(game){game.rating++;}},Now on to the next! :D
- Joined
Yay, thanks for reading!
surprised with the other answer.. short and simple...
why i make it complicated... LOL
addRating (i) { this.$set(this.games[i], 'rating', this.games[i].rating + 1) }btw thanks Marina, nice tutorial
- Joined
All ways lead to Rome-^ Thanks for reading! <3
- LocationAccra
- WorkFullstack developer at Fundihub
- Joined
great one again. i'm accepting the challenge. i will post my answer soon
- Joined
w00t!
- LocationAccra
- WorkFullstack developer at Fundihub
- Joined
- LocationAccra
- WorkFullstack developer at Fundihub
- Joined
hey marina please check it and let me know of any improvements or corrections. Thanks
- Joined
Hey Jonathan, awesome job! I wasn't expecting you to catch on the (game, index) since i didn't cover it on the tutorial - but job well done finding that out on your own! :)
- LocationAccra
- WorkFullstack developer at Fundihub
- Joined
thanks. i will be looking forward to more challanges that pushes me to learn more. I hope you will cover the (game, index) in a different tutorial.
- Email
- LocationSan Salvador, El Salvador
- EducationUniversidad de El Salvador
- WorkTechnical Leader at FOCUS ITO
- Joined
@click="game.rating += 1", adding this on the span also works
<span v-for="star in game.rating" @click="game.rating+=1">❤️</span>
- LocationBengaluru
- Educationbachelors of technology
- WorkFullStack Python Django developer at Anlyz
- Joined
My Solution for the challenge
thepracticaldev.s3.amazonaws.com/i...
- Joined
It works, but it's a little overkill :) You can pass the whole 'game' object to the function, that way you don't have to.find on the array. Also, be careful with==, as a best practice try to use=== that way you won't run into very hard to understand bugs with types! :D
- LocationBengaluru
- Educationbachelors of technology
- WorkFullStack Python Django developer at Anlyz
- Joined
noted. Thanks
- LocationAbuja, Nigeria
- WorkBack-end developer
- Joined
LOL Fallout 76 not spared here either. Nice post though, you really did not leave any stone unturned
- Joined
:D Well they really messed up. Also, thanks!
Thanks a lot for sharing v-for. I'm still a bit confused in a few things you've done above.I am a beginner in Vue.js :) Please keep blogging .
Pass game as a parameter.
Then can have ...
methods: {
addRating(game) {game.rating +=1 }
}
So don't need "this."
- Joined
This is another way to do it :)
please tell me, the v-key attribute should be visible in the markup?thnk u
prntscr.com/smsw3e
- Joined
Hey Iryna, no it shouldn't be rendered to the markup as it is internal to Vue
For further actions, you may consider blocking this person and/orreporting abuse
