如何在 VueJS 中实现多个计数器答案

【问题标题】：How to implement multiple counter in VueJS如何在 VueJS 中实现多个计数器
【发布时间】：2018-12-19 16:31:41
【问题描述】：

我是一个初学者，我现在正在做一个小练习，我需要实现一个函数，每次我们点击“投票”按钮时都会为特定图片投票。

这是它的样子，例如，如果我点击第一个按钮，我需要增加这张图片的投票数。这是我所做的：

<div id="display" class="container">
    <table class="w3-table-all" id="tableDisplay">
      <tr>
        <th>Cat</th>
        <th>Vote</th>
      </tr>
    </table>
    <div v-for="display in gridData">
    <table class="w3-striped w3-table-all table table-bordered" id="tableDisplay">
      <tr class="w3-hover-light-grey">
        <th>
          <img :src="display.url" height="200px" width="300px"/>
        </th>
        <th>
          <button class="w3-button w3-green w3-hover-light-green"v-on:click="test(display.counter,display.id)" v-bind:id="display.id">Vote !</button>
        </th>
      </tr>
    </table>

  </div>

</div>

还有 vueJs 部分：

new Vue({


el :'#display',
  data: {
    gridData :[
    {
        "url": "http://24.media.tumblr.com/tumblr_m82woaL5AD1rro1o5o1_1280.jpg",
        "id": "MTgwODA3MA",
        "counter" : 0
    },
    {
        "url": "http://24.media.tumblr.com/tumblr_m29a9d62C81r2rj8po1_500.jpg",
        "id": "tt",
        "counter" : 0

    }
  ],
},
  methods:{
    test: function(count,id){
      count ++;
      alert(count);
    }
  },
})

问题是它没有更新更改，在“计数器”部分它仍然为 0。

感谢您的帮助。

【问题讨论】：

标签： web vue.js web-development-server

【解决方案1】：

将<div v-for="display in gridData"> 更改为<div v-for="(display, idx) in gridData">，以便您知道您正在使用数组中的哪个项目。

v-on:click="test(display.counter,display.id) 到 v-on:click="test(idx)

和test 函数：

test: function(idx) {
  this.gridData[idx].count++;
}

这样你就增加了数组项的计数。

目前您只是增加参数count（一个在test 范围结束后死亡的实例变量），它什么都不做。

见下文：

new Vue({
  el: '#display',
  data: {
    gridData: [{
        "url": "http://24.media.tumblr.com/tumblr_m82woaL5AD1rro1o5o1_1280.jpg",
        "id": "MTgwODA3MA",
        "counter": 0
      },
      {
        "url": "http://24.media.tumblr.com/tumblr_m29a9d62C81r2rj8po1_500.jpg",
        "id": "tt",
        "counter": 0
      }
    ],
  },
  methods: {
    test: function(idx) {
      this.gridData[idx].counter++;
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="display" class="container">
  <table class="w3-table-all" id="tableDisplay">
    <tr>
      <th>Cat</th>
      <th>Vote</th>
    </tr>
  </table>
  <div v-for="(display,idx) in gridData">
    <table class="w3-striped w3-table-all table table-bordered" id="tableDisplay">
      <tr class="w3-hover-light-grey">
        <th>
          <img :src="display.url" height="200px" width="300px" />
        </th>
        <th>
          <div>Current Votes: {{display.counter}}</div>
          <button class="w3-button w3-green w3-hover-light-green" v-on:click="test(idx)" v-bind:id="display.id">Vote !</button>
        </th>
      </tr>
    </table>

  </div>

</div>

【讨论】：

成功了，非常感谢先生！唯一的问题是它不保存投票数（如果我刷新页面，它会回到 0）。我希望它更新 JS 文件中的值。你知道这是否可能吗？谢谢
@VincentTng 这是一个大问题，一个大答案。您应该研究持久化数据。如果您希望您网站的所有访问者看到相同票，您需要服务器端持久性。
谢谢先生，我尝试使用 localStorage.getItem 方法进行编码（我听说它会起作用）但我是一个完整的初学者，我不明白它是如何工作的。你介意快速检查我的代码吗？我真的不知道如何使用它。我在此链接上创建了另一个帖子：stackoverflow.com/questions/53870263/…。如果您有任何建议，我将不胜感激。谢谢

【解决方案2】：

具有类似功能的重复元素是组件非常方便的地方。将单个项目显示分解为它自己的子组件，如下所示：

<div v-for="display in gridData">
    <vote-widget :picture="display"></vote-widget>
</div>

每个人都有自己的数据和孤立的范围。

【讨论】：