Vue更新v-for属性

Question

假设我从一个啤酒数组中呈现了一个列表，如下所示：

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

当我单击从我的啤酒数组中呈现的列表中的啤酒输入时，我希望在我的beers对象上更新该特定啤酒的验证属性。

我检查了这个事件，但我不知道如何用Vue来处理这件事。

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

有人能引导我在正确的方向或工作流程，这样我就可以很容易地更新特定的啤酒属性被点击。

编辑

不要紧。它就像把当前的啤酒传递给验证方法一样简单，如下所示：

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

这允许我操作当前项属性。

Answer 1

您需要将beer传递给单击处理函数。默认情况下，它接收事件对象，但通常不需要它。相反，您想要处理您的数据。

文献资料给出了传递常量的例子，但是模型变量是公平的(更有可能是使用什么)。下面的示例在每次单击时都会增加verified值。

​

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>

​