我有一组单选按钮。我正在利用vuejs。我想知道是否可以按组对它们进行验证,因为需要从每个类别中单击1个按钮-因此我无法将要求添加到每个按钮中。使用vuejs的任何建议
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="bs-example">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="start">
<strong>one</strong>
</label>
<label class="btn btn-secondary" title="I am new or inexperienced with this">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="competence = 0">Novice
</label>
<label class="btn btn-secondary" title="I am growing in my competence with this.">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="competence = 0">Developing
</label>
<label class="btn btn-secondary" title="I am generally competent with this.">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="competence = 0">Proficient
</label>
<label class="btn btn-secondary" title="I could instruct or mentor others on this.">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="competence = 0"> Mastered
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="start">
<strong>two</strong>
</label>
<label class="btn btn-secondary" title="Others would doubt my confidence with this.">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="confidence = 0">Not Very Confident
</label>
<label class="btn btn-secondary" title="Others can see I am growing in my confidence with this.">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="confidence = 0"> Somewhat Confident
</label>
<label class="btn btn-secondary" title="Others generally see me as confident in this.">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="confidence = 0">Confident
</label>
<label class="btn btn-secondary" title="Others are confident with my ability to effectively apply this.">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="confidence = 0">Very Confident
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="start">
<strong>three</strong>
</label>
<label class="btn btn-secondary" title="Others do not see me applying this.">
<input type="radio" name="options"data-toggle="tooltip" id="Build" autocomplete="off" @click="consistency = 0">Never
</label>
<label class="btn btn-secondary" title="Others see me sometimes applying this. ">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="consistency = 0">Sometimes
</label>
<label class="btn btn-secondary" title="Others would say I usually apply this consistently.">
<input type="radio" name="options" data-toggle="tooltip" id="Build" autocomplete="off" @click="consistency = 0">Frequently
</label>
<label class="btn btn-secondary" title="Others can count on me to always apply this.">
<input type="radio" name="options"data-toggle="tooltip" id="Build" autocomplete="off" @click="consistency = 0">Always
</label>
</div>
</div>
<br>
</div>
</div>
</div>