vuejs, как повысить рейтинг каждой игры одним нажатием на промежуток? - PullRequest
Новая
       0

vuejs, как повысить рейтинг каждой игры одним нажатием на промежуток?

0 голосов
/ 15 февраля 2019

Я хочу иметь возможность увеличивать рейтинг каждой игры индивидуально, нажимая на элемент span.Я пытаюсь получить доступ к рейтингу свойства в массиве, но когда я консоль журнала я получаю неопределенным.Как повысить рейтинг каждой уникальной игры на клике?

Я добавил метод для обработки события клика, и я пытаюсь увеличить количество каждой оценки, но, похоже, я ошибаюсь. 

<html>

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

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

<span v-for="star in game.rating" v-on:click="increment">❤️</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() {
        this.rating++ },
      }
    });
  </script>
 </body>

 </html>

Я ожидаю, что рейтинги каждой игры увеличатся.например, рейтинг Супер Марио до 5, легенда о Зельде Окарине о времени до 6 и т. д.

1 Ответ

0 голосов
/ 15 февраля 2019 
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...