[Vuejs]-How do you make radio like button in a loop

by

3👍

✅

You can only select one radio button in a group of radio buttons with the same name within a form. So your radio buttons on each row would have the same name.

ex:

<td>
   <input type="radio" id="id_{{ index+1 }}" name="name_{{ index+1 }}" value="value" checked>
</td>
👤Oleg

2👍

If you just want radio inputs then place them directly in your TD elements and give them a name so that they belong to the same group: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

<td><input type="radio" id="id" name="name" value="value" checked></td>

If you want normal buttons to behave like radio inputs, try wrapping the input in a label, style the label to look like a button, and hide the input.

Hope this helps.

👤Daniel Toillion

0👍

<tr v-for="(material, index) in getmaterials" :key="index">
              <td>{{ index+1 }}</td>
              <td>{{ material.product_name }}</td>
              <td>{{ material.qty }}</td>
              <td>{{ material.price }}</td>
              <td>{{ material.budget}}</td>
              <td> A <input type="button">radio button </input> </td>
              <td> B <input type="button">radio button </input> </td>
👤user13898879

Leave a comment