CODEWITHSUNDEEP
htmllaravelvue.js
double d
double d

Reputation: 63

how do you make radio like button in a loop

enter image description here

i want to make a button that is functioning like radio button

what it is called? also how you put radio button on a loop like the picture above?

the button input must be wrapped with the div right? but how do you do it

to put it simply, my code goes like this

<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><input type="radio" name="radio_a"></td>
                      <td><input type="radio" name="radio_b"></td>
                      <td><input type="radio" name="radio_c"></td></tr>

Upvotes: 0

Views: 164

Answers (3)

Oleg
Oleg

Reputation: 46

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>

Upvotes: 3

user13898879
user13898879

Reputation: 

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

Upvotes: 0

Daniel Toillion
Daniel Toillion

Reputation: 48

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.

Upvotes: 2

Related Questions