CODEWITHSUNDEEP
javascriptvue.js
Stephan-v
Stephan-v

Reputation: 20369

Vue update v-for property

Let's say I am rendering a list from a beers array like this:

<tr v-for="beer in beers">
    <td class="switch">
        <input v-model="beer.verified" v-on:click="verify">
        <label for="cmn-toggle-{{$index}}"></label>
    </td>
<tr>

When I click on one of the beer inputs from the list that was rendered from my array of beers I want to update the verified property of that specific beer on my beers objects.

I checked the event but I am not sure how to handle this with Vue.

methods: {
    verify: function(event) {
        console.log(event)
    }
},

Can somebody guide me in the right direction or workflow so I can easily update the specific beer property that was clicked on.

Edit

Nevermind. It was as simply as passing the current beer through to the verify method like so:

v-on:click="verify(beer)"

This allowed me to manipulate the current items properties.

Upvotes: 0

Views: 635

Answers (1)

Roy J
Roy J

Reputation: 43899

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>

Upvotes: 2

Related Questions