如何在vuejs中使单选按钮独立于其他按钮

Question

我正在制作一个清单，我有类别，每个类别都有其干预，您必须根据与问题相对应的内容进行检查，例如。

清单.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，即干预2时，将取消选择第一个。

https://codepen.io/lucascardemil/pen/GRMejWK

我怎样才能得到这些数据

Answer 1

收音机的名字是一样的，所以每行名字存在的existe都会像收音机组一样动作，所以只选择一个。

换句话说，您需要为每行的单选按钮组分配不同的名称。如果需要，您还需要更改模型绑定以正确保存它以对应每个干预。

以下是我在 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>