我们更新v-for属性

Vue update v-for property

本文关键字：属性 v-for 更新 我们      更新时间：2023-09-26

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

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

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

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

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

相关文章：