Discussion :

[fruwen7]

bonjour,

mon tableau est comme ceci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table class="w3-table-all">
              <thead>
                <tr class="w3-blue">
                  <th scope="col">Hebergeur</th>
                  <th scope="col">Utilisateur</th>
                  <th>Action</th>
                </tr>
              </thead>
 
              <tr
                v-for="heber in store.getters['global/getHeb']"
                :key="heber.id"
              >
                <td>{{heber.heb }}</td>
                <td>{{heber.user }}</td>
                <td>
 
                  <q-btn
                    @click="ShowUpdateForm(heber)"
                    class="w3-button w3-green w3-section w3-padding"
                  >
                    Modifier
                    </q-btn>
                    &nbsp;
                    <q-btn
                      class="w3-button w3-red w3-section w3-padding"
                      @click="deleteHeb(heber.id)"
                    >
                      Supprimer
                      </q-btn>
                </td>
                </tr>
 
            </table>

je veux créer un formulaire pour éditer un document

ce formulaire est de type modal



mon formulaire d'édition :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <form class="w3-container">
          <div class="w3-section">
            <label>
              <b>Hebergeur</b>
            </label>
            <input
              class="w3-input w3-border w3-margin-bottom"
              v-model="form.heb"
              type="text"
              placeholder="Enter Hebergeur"
              name="usrname"
              required
            >
 
              <label>
                <b>Utilisateur</b>
              </label>
              <input
                class="w3-input w3-border"
                v-model="form.user"
                type="text"
                placeholder="Enter Utilisateur"
                name="psw"
                required
              >
                <q-btn
                  class="w3-button w3-block w3-blue w3-section w3-padding"
                  @click="updateHeb(heber.id)"
                >Modifier</q-btn>
          </div>
        </form>

pour afficher le formulaire j'ai créer une fonction comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 const ShowUpdateForm = heber => {
      document.getElementById("id02").style.display = "block";
      form.heb = heber.heb;
      form.user = heber.user;
    };

celle-ci permet d'afficher le formulaire avec les valeurs déjà créées


je veux maintenant créer une autre fonction qui fait l'édition et la relier avec le bouton modifier dans le formulaire modal afficher comment faire ?

N.B : j'utilise la base de données firebase mais l'affichage je le fait via vuex store

merci de me répondre si y a-t-il d'autres informations à ajouter pour bien éclaircir ma situation n'hésitez pas à me le demander