Créer un modal form avec vuejs pour éditer un document dans firebase

bonjour,

mon tableau est comme ceci :

Pièce jointe 607873

Code:

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

Pièce jointe 607874

mon formulaire d'édition :

Code:

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:

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 :)