DEV Community

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 post

Namstel • Mar 11 '19 • Edited

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

HTML:

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

JS bit:

methods: {
        increaseRating(game){
        game.rating++;
    }
},

Now on to the next! :D

Marina Mosti • Mar 13 '19

Yay, thanks for reading!

Lukman Arif Sanjani • May 1 '19

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

Marina Mosti • May 1 '19

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

Jonathan Akwetey • Feb 14 '19

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

Marina Mosti • Feb 14 '19

w00t!

Jonathan Akwetey • Feb 15 '19

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

Marina Mosti • Feb 15 '19

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

Jonathan Akwetey • Feb 15 '19

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.

Alex Ágreda • Feb 17 '19

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

Enkay💗 • Jun 30 '19

HTML:

❤️

js:

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

Jeremy Lincoln • Mar 4 '20

<span v-for="star in game.rating" @click="game.rating+=1">❤️</span>

Pawan Chaurasia • Feb 15 '19

My Solution for the challenge
thepracticaldev.s3.amazonaws.com/i...

Marina Mosti • Feb 15 '19

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