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

Question

我正在做一个清单，我有类别，每个类别都有它的干预，你必须根据对应的问题进行检查，例如。

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

我怎样才能得到这些数据

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' + intervencion.id"
                 v-model="intervencion.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":"",
              "observacion":""
          },
          {
              "id":2,
              "intervencion":"intervencion2",
              "existeValue":"",
              "estadoValue":"",
              "observacion":""
          }]
      },
      {
          "categoria":"category2",
          "intervenciones":[{
              "id":3,
              "intervencion":"intervencion3",
              "existeValue":"",
              "estadoValue":"",
              "observacion":""
          },
          {
              "id":4,
              "intervencion":"intervencion4",
              "existeValue":"",
              "estadoValue":"",
              "observacion":""
          }]
      }]
    };
  }
};
</script>