Je développe en 1 composant = 1 style de fichier en vue2.

J'ai une table construite via un composant de table Bootstrap-Vue, j'utilise le fournisseur pour lui transmettre des éléments.

L'une des colonnes contient des boutons de modification pour chaque ligne.

Ces boutons déclenchent un bootstrap-modal.

J'utilise un V-if pour initialiser la table et ses propriétés.

<b-modal  v-if='toShow' id="modalallergy" @hide="resetModal">
      <h4 class="my-1 py-1" slot="modal-header">Allergie {{ modalDetails._id }}</h4>
      <b-container class="bv-example-row">
            <b-row>
                <b-col>
                  identifiant : {{modalDetails.data.content}}
                </b-col>
                <b-col>
                Catégorie : {{modalDetails.data.content}}
                </b-col>
            </b-row>
            </b-container>
    </b-modal>

    <b-modal id="modalallergy-edit" @hide="resetModal">
      <h4 class="my-1 py-1" slot="modal-header">Edition de l'allergie {{ modalDetails._id }}</h4>
      <pre>{{ modalDetails.data}}</pre>
    </b-modal>

Ceci est mon modal et juste au dessus j'ai mon bouton:

<button class="btn btn-xs btn-success" @click.stop="details(row.item,row.index,$event.target)">
        <span class="glyphicon glyphicon-search"></span>
      </button>

Et ci-dessous dans la section <script> et methods j'ai mon appel:

details (item, index, button) {
  this.modalDetails.data = item
  this.modalDetails.index = index
  this.modalDetails._id = item.content._id
  this.$root.$emit('bv::show::modal', 'modalallergy', button)
}

Le problème est que seul le deuxième clic sur le bouton déclenchera l'ouverture modale. (Les propriétés de la table n'ont pas encore été hydratées - du moins pas du point de vue du bouton et du modal.)

J'ai également essayé d'utiliser un booléen et de passer les paramètres manuellement, mais dans ce cas, il ne s'ouvre pas du tout.

11
tatsu 16 nov. 2017 à 14:46

4 réponses

Meilleure réponse

Vous auriez dû résoudre le problème, mais pour les tentatives futures, c'est mon avis. J'avais un problème similaire. Dans mon cas, le problème était le v-if utilisé pour initialiser les composants à l'intérieur du modal. Je crois que si vous changez le v-if en balises h4 et b-container, cela fonctionnera.

5
carolina ramalho 30 nov. 2018 à 00:59

Vous pouvez utiliser un délai pour faire une petite solution de contournement.

this.myVar = someThing;
setTimeout(function() {
  $('#mymodal').modal('show');
}, 100);
0
Remo Kessler 19 mars 2020 à 08:50

Vérifiez votre code et je ne suis pas sûr, mais vous pouvez essayer

details (item, index, button) {
  this.modalDetails.data = item
  this.modalDetails.index = index
  this.modalDetails._id = item.content._id
  this.$root.$emit('bv::show::modal', 'modalallergy', button)
  this.$root.$emit('bv::show::modal', 'modalallergy', button)
}
1
Bhavin Solanki 29 nov. 2017 à 12:59

Pourriez-vous utiliser v-on:click="details(row.item,row.index,$event.target)" au lieu de @click.stop="details(row.item,row.index,$event.target)"? ou je me trompe horriblement :)

1
Majid ALSarra 29 nov. 2017 à 12:22
47328857