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.

Why are you calling @click.stop? I wouldn't think you would have to worry about propagation from the component you have described. — Tom Headifen, Nov 22 '17 at 19:57
Could you include in the question what else in the `vue` contents before the `methods` section? it'll help — Majid ALSarra, Nov 29 '17 at 23:47

score 6 · Accepted Answer · answered Nov 30 '18 at 00:59

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.

score 1 · Answer 2 · answered Nov 29 '17 at 12:22

1

Could you use v-on:click="details(row.item,row.index,$event.target)" instead of @click.stop="details(row.item,row.index,$event.target)" ? or I'm getting everything horribly wromg :)

answered Nov 29 '17 at 12:22

Majid ALSarra

394
2
7

score 1 · Answer 3 · answered Nov 29 '17 at 12:59

1

Review your code and i am not sure but you can try

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

answered Nov 29 '17 at 12:59

Bhavin Solanki

4,740
3
26
46

I'm marking as answer because I don't want half the points or all of them to disappear into nothing but it didn't solve my issue. – tatsu Nov 29 '17 at 16:03

score 0 · Answer 4 · answered Mar 19 '20 at 08:50

0

you can use a delay to do a little workaround.

this.myVar = someThing;
setTimeout(function() {
  $('#mymodal').modal('show');
}, 100);

answered Mar 19 '20 at 08:50

Remo Kessler

1

Modal only showing after the second click

4 Answers4

Linked