Как реализовать множественный счетчик в VueJS

Question

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

Вот как это выглядит, например, если я нажму на первую кнопку, мне нужно увеличить количество голосов за эту фотографию.Вот что я сделал:

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

Спасибо за любую помощь.

Answer 1

Повторяющиеся элементы с такой функциональностью - вот где компоненты действительно удобны.Разбейте отображение отдельного элемента на собственный субкомпонент, например:

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

Каждый будет иметь свои собственные данные и изолированную область.

Answer 2

Измените <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>