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>