按组验证单选按钮

时间:2020-04-15 23:43:37

标签: vue.js

我有一组单选按钮。我正在利用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>

0 个答案:

没有答案