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，则可以轻松地将它们放在选项名称之后。

我希望这会有所帮助。

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

1 个答案: