我正在制作一个清单,我有类别,每个类别都有其干预措施,您必须根据与问题相对应的内容进行检查。
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>
选择第一个单选时没有问题,问题是选择第二行第二个单选时,干预2,第一个被取消选择。
https://codepen.io/lucascardemil/pen/GRMejWK
我如何获取该数据
无线电的名称相同,因此每一行名称为
existe
的无线电将像无线电组一样操作,因此仅选择一个。换句话说,您需要为每行的单选按钮组分配不同的名称。如果需要,您还需要更改模型绑定,以便正确保存与每个干预相对应的模型绑定。
下面是我在 vuejs 2 中的示例代码,您可以参考。