как сделать радио как кнопку в петле

Question

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

 {{index + 1}}  {{material.product_name}}  {{material.qty}}  {{material.price}}  {{material.budget}}     

Answer 1

Вы можете выбрать только один переключатель в группе переключателей с тем же именем в форме. Таким образом, ваши переключатели в каждой строке будут иметь одно и то же имя.

например:

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

Answer 2

Если вам просто нужны радиовходы, поместите их прямо в элементы TD и дайте им имя, чтобы они принадлежали к одной группе: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

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

Если вы хотите, чтобы обычные кнопки вели себя как радиовходы, попробуйте обернуть ввод меткой, стилизовать метку так, чтобы она выглядела как кнопка, и скрыть ввод.

Надеюсь, это поможет.

Answer 3

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