[Vuejs]-Vuejs how to increase the ratings of each game with a click on the span?

by

4👍

✅

<html>

<head>
  <title>Vue</title>
</head>

<body>
<div id="app">
  <div v-for="(game, index) in games" :key="game.name"> <p>{{game}}</p>
    <h1>{{ game.name }} - <small>{{ game.console }}</small></h1>

    <span v-for="star in game.rating" v-on:click="increment(index)">❤️</span>

    <div v-if="game.rating > 5">Wow, this game must be <b>REALLY</b> good</div>
  </div>
</div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    const app = new Vue({
      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 }
          ],   
        },
          methods: {
                increment: function(index) {
                    this.games[index].rating += 1;
                },
          }
    });
  </script>
</body>

</html>
👤Keith Gulbro

Leave a comment