Vue的更新V-财产

2016-09-21 74 views 0 likes

比方说，我从一个啤酒阵列像这样渲染列表：Vue的更新V-财产

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

这让我操作当前项目的属性。

来源

2016-09-21 Stephan-v

回答

您需要将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>

来源

2016-09-21 21:05:18

Vue的更新V-财产

回答

相关问题