Hands-on Vue.js for Beginners (Part 4)

Marina Mosti on February 14, 2019

Welcome back! 🤩 Last time we took at conditional rendering with v-if and v-show. This time we will learn how to loop through arrays and objects an... [Read Full]
markdown guide

Thanks for the tutorial, Marina. Here's my solution:


<span v-for="star in game.rating" @click="increaseRating(game)"></span>

JS bit:

methods: {

Now on to the next! :D


great one again. i'm accepting the challenge. i will post my answer soon


hey marina please check it and let me know of any improvements or corrections. Thanks

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! :)

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.

@click="game.rating += 1", adding this on the span also works


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


All ways lead to Rome -^ Thanks for reading! <3





methods: {
increaseRatings(game) {
const rate= game.rating++;
this.game.rating = rate;


LOL Fallout 76 not spared here either. Nice post though, you really did not leave any stone unturned


:D Well they really messed up. Also, thanks!


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


Pass game as a parameter.
Then can have ...

methods: {
addRating(game) {game.rating +=1 }

So don't need "this."


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 .

code of conduct - report abuse