I'm making a list, I have categories, each category has its intervention and you have to check it based on what corresponds to the problem.
CheckList.vue
<table class="table table-bordered"> <thead> <tr> <th rowspan="2" style="vertical-align: top">Categoria</th> <th colspan="2">Existe</th> <th colspan="3">Estado</th> <th colspan="2" rowspan="2" style="vertical-align: top"> Observación </th> </tr> <tr> <th>Si</th> <th>No</th> <th>Bueno</th> <th>Regular</th> <th>Malo</th> </tr> </thead> <tbody v-for="(formatchecklist, index) in formatchecklists" :key="index" > <tr> <td colspan="8" class="table-secondary"> <em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em> </td> </tr> <tr v-for="intervencion in formatchecklist.intervenciones" :key="intervencion.id" > <td>{{ intervencion.intervencion }}</td> <td class="text-center"> <input type="radio" name="existe" value="si" v-model="checkExiste" /> <label></label> </td> <td class="text-center"> <input type="radio" name="existe" value="no" v-model="checkExiste" /> <label></label> </td> <td class="text-center"> <input type="radio" name="estado" value="bueno" v-model="checkEstado" /> <label></label> </td> <td class="text-center"> <input type="radio" name="estado" value="regular" v-model="checkEstado" /> <label></label> </td> <td class="text-center"> <input type="radio" name="estado" value="malo" v-model="checkEstado" /> <label></label> </td> <td> <textarea name="observacion" class="form-control" ></textarea> </td> <td> <a class="btn btn-warning btn-sm" @click.prevent="" title="Editar" > <i class="fas fa-edit"></i> </a> </td> </tr> </tbody> </table>
There is no problem when selecting the first radio option. The problem is that when selecting the second radio option in the second row, intervention 2, the first one is deselected.
https://codepen.io/lucascardemil/pen/GRMejWK
How do I get this data
The radios have the same name, so each row with a radio named
existe
will operate like a radio group, so only one is selected.In other words, you need to assign a different name to the radio button group for each row. If necessary, you will also need to change the model binding so that the model binding corresponding to each intervention is saved correctly.
The following is my sample code in vuejs 2 for your reference.