Comment rendre le bouton radio indépendant des autres boutons dans vuejs

Question

Je fais une liste, j'ai des catégories, chaque catégorie a son intervention et il faut la vérifier en fonction de ce qui correspond au problème.

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>

Il n'y a aucun problème lors de la sélection de la première option radio. Le problème est que lors de la sélection de la deuxième option radio dans la deuxième rangée, intervention 2, la première est désélectionnée.

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

Comment puis-je obtenir ces données

Answer 1

Les radios portent le même nom, donc chaque rangée de radios nommées existe fonctionnera comme un groupe de radios, donc une seule est sélectionnée.

En d’autres termes, vous devez attribuer un nom différent au groupe de boutons radio pour chaque ligne. Si nécessaire, vous devrez également modifier la liaison du modèle afin que la liaison du modèle correspondant à chaque intervention soit correctement enregistrée.

Ce qui suit est mon exemple de code dans vuejs 2 pour votre référence.

ssccc