So machen Sie Optionsfelder unabhängig von anderen Schaltflächen in VueJS

Question

Ich erstelle eine Liste, ich habe Kategorien, jede Kategorie hat ihre Intervention und Sie müssen sie anhand dessen überprüfen, was dem Problem entspricht.

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>

Bei Auswahl der ersten Funkoption gibt es kein Problem. Das Problem besteht darin, dass bei Auswahl der zweiten Funkoption in der zweiten Zeile, Eingriff 2, die erste abgewählt wird.

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

Wie erhalte ich diese Daten

Answer 1

无线电的名称相同，因此每一行名称为 existe 的无线电将像无线电组一样操作，因此仅选择一个。

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

下面是我在 vuejs 2 中的示例代码，您可以参考。