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:

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

 
 

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

 

HTML:

❤️

js:

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