带有辅助输入的表单复选框

Question

目前，我有一个动态表单复选框输入。

<b-form-group label="Skills">
    <b-form-checkbox-group v-model="form.selected" :options="options"/>
</b-form-group>

但是，我需要对此进行扩展，以便对于每个选项，旁边都有一个数字输入，并且它们绑定在一起。

我尝试使用 v-for 来执行此操作，但它并没有真正起作用，而且我无法链接它们，因此对于每个选定的（假设有两个），v-model 目标看起来像这个。

form {
    { selected: checkboxName,
      number: 5
    },
    { selected: checkboxNameTwo,
      number: 2
    },
}

如果有人有任何指点，那就太好了。

亲切的问候， 狐狸

Answer 1

在第二个版本中，您需要一个与每个选项相关的输入值。 所以你可以这样做。

new Vue({
	el: '#app',
  data: {
  	form: [
        {
          name: 'first',
          number: 0,
          selected: false
        },
        {
          name: 'second',
          number: 0,
          selected: false
        }
      ]
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />



<div id="app">
  {{form}}
  <b-form-group >
     <b-input-group v-for="option in form" :key="option">   
      	<b-input-group-prepend is-text>
        {{option.name}}  
        </b-input-group-prepend>
      	<b-form-input v-model.number="option.number" type="number" >
        </b-form-input>
      </b-input-group>	
	 
   </b-form-group>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

如果您还需要 CheckBox，那么您可以轻松地将它们放在选项名称之后。

我希望这会有所帮助。