Vue的更新V-財產

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>