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

Question

I want to generate radio buttons in vue.js by v-for, but when they are generated if i selected one radio the rest radios is selected too, so i want user to be able to choose only one radio.'

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

Add a colon : before for to tell Vue to interpret its contents as a js expression instead of as a string: <input type="radio" :for="item.text">. Do the same for :value="item.text". It's a shorthand for v-bind:for and v-bind:value. — tao
– tao, Commented Dec 22, 2020 at 10:00

tony19 · Accepted Answer · 2022-07-15 23:39:02Z

2

You should bind value.

As you didn't bind value, radio button values are all same as the fixed value - item.text, not the dynamic one ${item.text} which is the text value of item object.

for attribute of label tag is the id of the form element to be bound.

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

edited Jul 15, 2022 at 23:39

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 22, 2020 at 9:50

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related