Bagaimana untuk menjadikan butang radio bebas daripada butang lain dalam vuejs

Question

Saya membuat senarai, saya mempunyai kategori, setiap kategori mempunyai campur tangan dan anda perlu menyemaknya berdasarkan apa yang sepadan dengan masalah.

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>

Tiada masalah apabila memilih pilihan radio pertama Masalahnya ialah apabila memilih pilihan radio kedua di baris kedua, intervensi 2, pilihan pertama dinyahpilih.

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

Bagaimana saya boleh mendapatkan data ini

Answer 1

Radio mempunyai nama yang sama, jadi setiap baris radio yang dinamakan existe akan beroperasi seperti kumpulan radio, jadi hanya satu dipilih.

Dalam erti kata lain, anda perlu menetapkan nama yang berbeza kepada kumpulan butang radio untuk setiap baris. Jika perlu, anda juga perlu menukar pengikatan model supaya pengikatan model yang sepadan dengan setiap campur tangan disimpan dengan betul.

Berikut ialah contoh kod saya dalam vuejs 2 untuk rujukan anda.