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

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

我检查了该事件，但我不确定如何使用 Vue 处理此事件。

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

有人可以指导我正确的方向或工作流程，以便我可以轻松更新点击的特定啤酒属性。

编辑

没关系。就像将当前啤酒传递给验证方法一样简单:

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

这使我能够操纵当前项目的属性。

Answer 1

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

The documentation给出了传递常量的示例，但模型变量是公平的游戏(并且更有可能是您将使用的)。下面的示例会在每次点击时递增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>