Je fais une liste, j'ai des catégories, chaque catégorie a son intervention et il faut la vérifier en fonction de ce qui correspond au problème.
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>
Il n'y a aucun problème lors de la sélection de la première option radio. Le problème est que lors de la sélection de la deuxième option radio dans la deuxième rangée, intervention 2, la première est désélectionnée.
https://codepen.io/lucascardemil/pen/GRMejWK
Comment puis-je obtenir ces données
Les radios portent le même nom, donc chaque rangée de radios nommées
existe
fonctionnera comme un groupe de radios, donc une seule est sélectionnée.En d’autres termes, vous devez attribuer un nom différent au groupe de boutons radio pour chaque ligne. Si nécessaire, vous devrez également modifier la liaison du modèle afin que la liaison du modèle correspondant à chaque intervention soit correctement enregistrée.
Ce qui suit est mon exemple de code dans vuejs 2 pour votre référence.