vue2 动态的复选列表里怎么绑定对象数组

Question

需求大致是: 由后台查询出单据里选择的省市列表, 然后填写对应省市的产品数量. 
把勾选的数据提交到后台.

html

<ul><li v-for="option in options">
   <input type="checkbox" v-model="selected" v-bind:value="option.id">
   <span>{{option.text}}</span>
   <input name="num" type="number" placeholder="填写数量" /></li></ul>

预览

js

new Vue({  el: 'body',  data: {    selected: [],    options: [
      { text: '上海市', id: '20' },
      { text: '湖北省', id: '43' },
      { text: '河南省', id: '45' },
      { text: '北京市', id: '10' }
    ]// 选项是动态加载出来的, 数量不定
  }
});

需要把勾选了的选项和后面的数量组成对象数组提交到后台.

需要的数据格式为:

selected:[{
    id:10,// 省市id
    num:24// 数量
}]

这样的应该怎么做?

Answer 1

&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;v-for="option&nbsp;in&nbsp;options"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="checkbox"&nbsp;v-model="selected"&nbsp;v-bind:value="option"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{option.text}}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;name="num"&nbsp;type="number"&nbsp;v-model="option.num"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;v-for="item&nbsp;in&nbsp;selected"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>new&nbsp;Vue({&nbsp;&nbsp;el:&nbsp;'body',&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;selected:&nbsp;[],&nbsp;&nbsp;&nbsp;&nbsp;options:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;text:&nbsp;'上海市',&nbsp;id:&nbsp;'20',num:''&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;text:&nbsp;'湖北省',&nbsp;id:&nbsp;'43',num:''&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;text:&nbsp;'河南省',&nbsp;id:&nbsp;'45',num:''&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;text:&nbsp;'北京市',&nbsp;id:&nbsp;'10',num:''&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;] &nbsp;&nbsp;} });