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

＆＃13;

new Vue({
  el: 'body',
  data: {
    beers: [{
      verified: 0
    }, {
      verified: 0
    }]
  },
  methods: {
    verify: function(beer) {
      ++beer.verified;
    }
  }
});

＆＃13;

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

＆＃13;

Vue更新v-for属性

1 个答案: