Vue.js vuejs如何通过点击跨度来提高每款游戏的收视率？_Vue.js_Vuejs2

Vue.js vuejs如何通过点击跨度来提高每款游戏的收视率？

vue.js vuejs2

Vue.js vuejs如何通过点击跨度来提高每款游戏的收视率？,vue.js,vuejs2,Vue.js,Vuejs2,我想能够增加每个游戏的评级，分别点击span元素。我试图访问数组中的属性分级，但当我记录控制台日志时，我没有定义。如何在点击时提高每个独特游戏的评级我添加了一个方法来处理点击事件，我试图增加每个评级的计数，但我似乎弄错了 <html> <head> <title>Vue </title> </head> <body> <div id="app"> <div v-for="game in game

我想能够增加每个游戏的评级，分别点击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>


Vue
{{game.name}-{{game.console}
❤️
哇，这个游戏一定很好
const app=新的Vue({
el:“#应用程序”，
数据：{
游戏：[
{名称：'Super Mario 64'，控制台：'Nintendo 64'，评级：4}，
{名称：'塞尔达陶笛的传奇'，控制台：'任天堂'
64'，评级：5}，
{名称：'魔法的秘密'，控制台：'超级任天堂'，评级：4}，
{name:'Fallout 76'，控制台：'Multiple'，评级：1}，
{名称：'Super Metroid'，控制台：'Super Nintendo'，评级：6}
],   
},
方法：{
增量：函数（）{
这个.rating++}，
}
});

我预计每场比赛的收视率都会提高。例如，超级马里奥的收视率为5，塞尔达陶笛的传奇时间为6等等。


<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>

Vue
{{游戏}
{{game.name}-{{game.console}
❤️
哇，这个游戏一定很好
const app=新的Vue({
el:“#应用程序”，
数据：{
游戏：[
{名称：'Super Mario 64'，控制台：'Nintendo 64'，评级：4}，
{名称：'TheLegendofZeldaOcarinaofTime'，控制台：'Nintendo64'，评级：5}，
{名称：'魔法的秘密'，控制台：'超级任天堂'，评级：4}，
{name:'Fallout 76'，控制台：'Multiple'，评级：1}，
{名称：'Super Metroid'，控制台：'Super Nintendo'，评级：6}
],   
},
方法：{
增量：函数（索引）{
此.games[索引]。评级+=1；
},
}
});


Vue
{{游戏}
{{game.name}-{{game.console}
❤️
哇，这个游戏一定很好
const app=新的Vue({
el:“#应用程序”，
数据：{
游戏：[
{名称：'Super Mario 64'，控制台：'Nintendo 64'，评级：4}，
{名称：'TheLegendofZeldaOcarinaofTime'，控制台：'Nintendo64'，评级：5}，
{名称：'魔法的秘密'，控制台：'超级任天堂'，评级：4}，
{name:'Fallout 76'，控制台：'Multiple'，评级：1}，
{名称：'Super Metroid'，控制台：'Super Nintendo'，评级：6}
],   
},
方法：{
增量：函数（索引）{
此.games[索引]。评级+=1；
},
}
});

回答得很好。我会考虑为上下文添加一个简短的描述。@ Keith Gulbro，这个答案我想我需要在CLI中创建一个项目来测试解决方案。@ Darragh Enright，我将等待描述。@ JonathanAkweteyOkine，用这个解决方案，本质上你只是宣布游戏变量为一个数组。在遍历模板中的games数组之后，我们只需引用增量方法中被单击的games项的索引作为参数。一旦通过我们在模板中声明的点击处理程序启动了递增函数，我们调用游戏数组和我们刚才点击的游戏项目的相应索引，然后通过简写方法递增评级，简写为

this.games[index].rating=this.games[index]+1

@Keith Gulbro谢谢你的解释我现在明白了。回答得很好。我会考虑为上下文添加一个简短的描述。@ Keith Gulbro，这个答案我想我需要在CLI中创建一个项目来测试解决方案。@ Darragh Enright，我将等待描述。@ JonathanAkweteyOkine，用这个解决方案，本质上你只是宣布游戏变量为一个数组。在遍历模板中的games数组之后，我们只需引用增量方法中被单击的games项的索引作为参数。一旦通过我们在模板中声明的点击处理程序启动了递增函数，我们调用游戏数组和我们刚才点击的游戏项目的相应索引，然后通过简写方法递增评级，简写为

this.games[index].rating=this.games[index]+1

@Keith Gulbro谢谢你的解释我现在明白了。