Modal only showing after the second click

Question

I'm developing in 1 component = 1 file style in vue2.

I have a Table constructed via a Bootstrap-Vue Table Component, I'm using the provider to pass it an items.

one of the columns contains modify buttons for each row.

these buttons trigger a bootstrap-modal.

I'm using a V-if to initialize the table and its properties.

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

this is my modal and just above I have my button :

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

and below in the <script> and methods section I have my call :

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

the issue is that only the second click on the button will trigger the modal opening. (The properties of the table have not been hydrated yet - at least not from the point of view of the button and modal.)

I also tried using a Boolean and passing the params manually but in that case it doesn't open at all.

Answer 1

You should have solved the problem, but for future attempts it's my opinion. I had a similar problem. In my case the problem was the v-if used to initialize components inside the modal. I belive if you change the v-if to the h4 and b-container tags will work.