Modal only showing after the second click

v-b-modal
vue modal
b-modal scrollable
b-modal close event
bootstrap-vue modal not working
bootstrap-vue modal ok event
bootstrap-vue modal hide-footer
no-close-on-backdrop

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.

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.

Modal opens on second click · Issue #3348 · ng-bootstrap/ng , Bug description: Modal is not showing until the second click and after This is basically causing the modal to be "open" but then only really  Modal is not showing until the second click and after second click it shows the first modal too. Although the DOM element are added after first click but are not shown properly. Link to minimally-working StackBlitz that reproduces the issue:

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

Modal works once but afterwards closes immediately every time , I'm trying to become au fait with Twitter's implementation of the modal window. set the show option to true so that your modal auto opens when you first click the I am only specifying the data- attributes and did not use any JavaScript to call </div> <div class="modal-footer"> <a href="#" class="btn secondary myclose" >  After the modal has hidden, I clicks the "Launch modal" button again (second times), then clicks "Close" button, the modal will not hide, it is still opening. Then, I compare bootstrap js which from last Thursday and Today version, found out that the following codes on Line 932 might causing issue:

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

Modal · Bootstrap, Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time. Below is a static modal example (​meaning its position and display have been overridden). btn-secondary" data-​dismiss="modal">Close</button> <button type="button" class="btn btn-primary">​Save  immediately after hiding a modal, if a show call is issued it doesn't work e.g. $('#show_modal').click(function(){ $('#test-modal').modal('show') $('#test-modal

Multiple modals - close on clicking outside function, The click outside to close function works for the last modal but not the first, despite using the getElementById('id01').style.display='block'" class="w3-button by your second one so it was never going to work … below i just use one window. Fullscreen Video Modal Boxes Delete Modal Timeline Scroll Indicator Progress Bars Skill Bar Range Sliders Tooltips Display Element Hover Popups Collapsible Calendar HTML Includes To Do List Loaders Star Rating User Rating Overlay Effect Contact Chips Cards Flip Card Profile Card Product Card Alerts Callout Notes Labels Circles Style HR Coupon

The Dangers of Stopping Event Propagation, Stopping event propagation is not just something recommended by bad Stack Overflow answers; To prove this, let me show you how easy it is to create a bug by using Since calling preventDefault in a click handler will always prevent the Whether it be for something as trivial as a Bootstrap modal or as critical as event  I found a problem in the overview and example of Modal popup. When I click the first time the modal popup is show the content correctly "Hello Modal", but when I click the second times the content was show wrong "{{modal.content}}". Can any one help me to fix this problem. Thanks in advance!

How to hide Bootstrap modal with JavaScript?, UGC NET CS Notes Paper II · UGC NET CS Notes Paper III · UGC NET CS Solved How to force Input field to enter numbers only using JavaScript ? As soon the modal has got finished, after being getting hidden from the user, the How to hide div element by default and show it on click using JavaScript and Bootstrap ? Show Close Button After (sec): Enter a number of seconds. The close button will only appear after that time has passed. The close button will only appear after that time has passed. Automatically Close After (ms) : Enter the number of ms to wait before automatically closing the popup.

Comments
  • Why are you calling @click.stop? I wouldn't think you would have to worry about propagation from the component you have described.
  • was just trying things to solve it. it didn't work.
  • Could you include in the question what else in the vue contents before the methods section? it'll help
  • 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.