使用 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

你应该bind值。

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

for标签的label属性是要绑定的表单元素的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>

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

Generate radio buttons in vue.js by using v-for

html

javascript

radio-button

vue.js