Form-Checkbox with secondary input

Question

Currently, I have a dynamic form-checkbox input.

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

However, I need to expand on this, so that for each option, there is a number input next to it, and they tie together.

I tried to do this with a v-for but it didn't really work, and I couldn't link them, so that for each selected (say there were two), the v-model destination would look something like this.

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

If anyone has any pointers, that would be great.

Kind Regards, Fox

harshit pandey harshit pandey · Accepted Answer · 2019-07-25T08:44:20

In the second version, you want an input value tied with each option. So you can do this.

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>

If in case you want CheckBox also then you can easily put them right after the option name.

I hope this helps.

Form-Checkbox with secondary input

1 Answers