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>预览jsnew 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

 <ul>
            <li v-for="option in options">
               <input type="checkbox" v-model="selected" v-bind:value="option">
               <span>{{option.text}}</span>
               <input name="num" type="number" v-model="option.num" />
            </li>
        </ul>
       <div v-for="item in selected">
           {{item}}      </div>

new Vue({  el: 'body',  data: {    selected: [],    options: [
        { text: '上海市', id: '20',num:'' },
        { text: '湖北省', id: '43',num:'' },
        { text: '河南省', id: '45',num:'' },
        { text: '北京市', id: '10',num:'' }
    ]
  }
});