javascript - vuejs怎么实现v-for中的单选按钮

问题描述

问 题

  <div  v-for="subject in subjects" v-bind:class="classObject" >{{subject.question}}
            <input type="radio" id="a" value="a" name="forradio" v-on:click="check_question">
            <label for="a">{{subject.answer_a}}</label>
            <input type="radio" id="b" value="b"  name="forradio"  v-on:click="check_question">
            <label for="b">{{subject.answer_b}}</label>
            <input type="radio" id="c" value="c" name="forradio"  v-on:click="check_question">
            <label for="c">{{subject.answer_c}}</label>
            <input type="radio" id="d" value="d" name="forradio"  v-on:click="check_question">
            <label for="d">{{subject.answer_d}}</label>
            </div>

这样不行，会导致所有单选只能选择一个

解决方案

解决了。

  <div id="subject-list-item">
        <ol>
           
            <div v-for="subject in subjects">
                <li>
                    {{subject.question}}
                    <input type="radio" v-model="subject.answer_e" v-bind:value="subject.answer_a" >
                    <span>{{subject.answer_a}}</span>
                    <input type="radio" v-model="subject.answer_e" v-bind:value="subject.answer_b" >
                    <span>{{subject.answer_b}}</span>
                    <input type="radio" v-model="subject.answer_e" v-bind:value="subject.answer_c" >
                    <span>{{subject.answer_c}}</span>
                    <input type="radio" v-model="subject.answer_e" v-bind:value="subject.answer_d" >
                    <span>{{subject.answer_d}}</span>


                </li>
            </div>
        </ol>
    </div>

这里需要注意，v-model会变成value的值，所以不能单纯的从官网的例子上照抄。而是需要将v-model设置为一个动态的值。

这篇关于javascript - vuejs怎么实现v-for中的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！