[英]how to make radio button independent of others in vuejs
I am making a checklist, I have the categories and each category has its intervention, you have to check according to what corresponds to the problem that is that for example.我正在制作一个清单,我有类别,每个类别都有其干预,您必须根据与问题相对应的内容进行检查,例如。
CheckList.vue清单.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>
When selecting the first radio there is no problem, the problem is when selecting the second radio of the second row, intervention 2, the first one is deselected.选择第一个收音机时,没有问题,问题是在选择第二行的第二个无线电2,即干预2时,将取消选择第一个。
https://codepen.io/lucascardemil/pen/GRMejWK https://codepen.io/lucascardemil/pen/GRMejWK
and how can i get that data我怎样才能得到这些数据
The radios' names are the same so each rows' radio whose name is existe
will action like radio group,so only one is selected.收音机的名字是一样的,所以每行名字存在的existe
都会像收音机组一样动作,所以只选择一个。
In other words, you need to assign different names for each rows' radio button group.And the model-binding you also need to be changed to save it correctly corresponding to each intervencion if necessary.换句话说,您需要为每行的单选按钮组分配不同的名称。如果需要,您还需要更改模型绑定以正确保存它以对应每个干预。
Below is my sample code in vuejs 2 which you could refer to.以下是我在 vuejs 2 中的示例代码,您可以参考。
<template>
<div>
<table class="table table-bordered" style="width: 100%;">
<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' + intervencion.id"
value="si"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'existe' + intervencion.id"
value="no"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="bueno"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="regular"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="malo"
v-model="intervencion.estadoValue"
/>
<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>
<pre>
{{JSON.stringify(formatchecklists, null, 2)}}
</pre>
</div>
</template>
<script>
export default {
data() {
return {
formatchecklists :[{
"categoria":"category1",
"intervenciones":[{
"id":1,
"intervencion":"intervencion1",
"existeValue":"",
"estadoValue":""
},
{
"id":2,
"intervencion":"intervencion2",
"existeValue":"",
"estadoValue":""
}]
},
{
"categoria":"category2",
"intervenciones":[{
"id":3,
"intervencion":"intervencion3",
"existeValue":"",
"estadoValue":""
},
{
"id":4,
"intervencion":"intervencion4",
"existeValue":"",
"estadoValue":""
}]
}]
};
}
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.