[Vuejs]-Vue update v-for property

by

2👍

✅

You need to pass the beer to the click handling function. By default, it receives the Event object, but very often you don’t need that. Instead, you want to deal with your data.

The documentation gives examples of passing constants, but model variables are fair game (and more likely what you’ll use). The example below increments the verified value on each click.

new Vue({
  el: 'body',
  data: {
    beers: [{
      verified: 0
    }, {
      verified: 0
    }]
  },
  methods: {
    verify: function(beer) {
      ++beer.verified;
    }
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<table>
  <tr v-for="beer in beers">
    <td class="switch">
      <input v-model="beer.verified" v-on:click="verify(beer)">
      <label for="cmn-toggle-{{$index}}"></label>
    </td>
    <tr>
</table>
👤Roy J

Leave a comment