使用v-for在vue.js中生成单选按钮

Question

我想通过v-for在vue.js中生成单选按钮，但当生成单选按钮时，如果我选择了一个单选按钮，那么其他单选按钮也会被选择，所以我希望用户只能选择一个单选。'

<template>
<div> 
<div v-for="item in items">
<input type="radio" id="l1"  value="item.text" v-model="checked">
<label id="l1" for="item.text">{{item.text}}</label>
</div>
</div> 
</template>

Answer 1

您应该绑定值。

由于没有绑定值，单选按钮的值都与固定值item.text相同，而不是动态值${item.text}，即item对象的text值。

label标签的

---

for属性是要绑定的表单元素的id。

<div v-for="item in items">
<input type="radio" :id="item.text" :value="item.text" v-model="checked"> // `:value` is shorthand for `v-bind:value`
<label :for="item.text">{{item.text}}</label>
</div>