確認入力の送信方法

Question

私はvuejs v.2を使用しています。私のデータ構造には、製品とキーワードがあります。 多対多の関係があります。製品にキーワードを添付するには、私は、キーワードのチェックボックスのリストを持っており、ユーザーが送信したときにのみ確認されたキーワードは、製品価値としてここ

<div class="col-md-6" v-for="keyword in keywords"> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" /> 
       {{ keyword.name }} 
     </label> 
    </div> 
</div> 

私はバインドできませんkeyword.id（v-bind:value）に接続する必要があります。

私はちょうど私があなたが配列データの変数で使用するVモデルを使用していないことかもしれない間違いは、コードを働いている以下だと思い、私に正しい方法

Answer 1

を表示してくださいサーバー に確認されたキーワードのIDを提出したいです：

VUEコンポーネント：

var demo = new Vue({ 
    el: '#demo', 
    data: function(){ 
     return { 
     keywords: [ 
      {name: 'key1', id: 1 }, 
      {name: 'key2', id: 2 }, 
      {name: 'key3', id: 3 } 
     ], 
     checked: [] 
     }; 
    } 
}) 

とHTMLで：

<div id="demo"> 
    <div class="checkbox"> 
     <label v-for="keyword in keywords"> 
      <input type="checkbox" :id="keyword.name" v-bind:value="keyword.id" v-model="checked"/> 
       {{ keyword.name }}   
       <br> 
     </label> 
     <br> 
     checked value: {{checked}} 
    </div> 
</div> 

作業中here