CODEWITHSUNDEEP
vue.jsvue-componentbootstrap-vue
ViLuWi
ViLuWi

Reputation: 327

BootstrapVue - Show b-modal after page loading

I want to use the design on a modal in a new page but I dont want to click a button to show the modal. I got basic code like this:

<b-modal id="modalPopover" title="Modal with Popover" ok-only>
    <p>
      This
      <b-button v-b-popover="'Popover inside a modal!'" title="Popover">Button</b-button>
      triggers a popover on click.
    </p>
    <p>
      This <a href="#" v-b-tooltip title="Tooltip in a modal!">Link</a> will show a tooltip on
      hover.
    </p>
</b-modal>

i tried to add attributs like v-show="true", show="true" or @show but nothing worked for me. Does someone has a solution for my problem?

Upvotes: 2

Views: 4329

Answers (2)

Hiws
Hiws

Reputation: 10324

You can use the visible prop, by setting it to true and it will show up when mounted automatically.

<b-modal visible>
  <!-- Content -->
</b-modal>

Upvotes: 2

Igor Moraru
Igor Moraru

Reputation: 7729

You can do it in mounted hook using the component method show(), and accessing the modal by ref:

<b-modal 
    ref="mymodal"
    // other props...
></b-modal>

And:

mounted(){
    this.$refs.mymodal.show()
}

Upvotes: 2

Related Questions