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

问题描述

问 题

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

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// 数量
}]

这样的应该怎么做?

解决方案

      <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:'' }
    ]
  }
});

这篇关于javascript - vue2 动态的复选列表里怎么绑定对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！