Comment rendre le bouton radio indépendant des autres boutons dans vuejs
P粉704066087
P粉704066087 2024-03-27 12:40:28
0
1
445

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

P粉704066087
P粉704066087

répondre à tous(1)
P粉416996828

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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal