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