2016-11-30 56 views
1

我使用的是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)。

我只是想检查关键字ID提交给服务器 请告诉我正确的方法

回答

1

我想你可能没有使用V模型与数组数据变量做了错误,以下是工作的代码:

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