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

Question

  <p  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>
            </p>

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

Answer 1

解决了。

  <p id="subject-list-item">
        <ol>
           
            <p 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>
            </p>
        </ol>
    </p>

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

Answer 2

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

https://cn.vuejs.org/v2/guide...