CODEWITHSUNDEEP
javascriptvue.jsbootstrap-modal
Hadzo
Hadzo

Reputation: 328

How to show modal on component/page created/load in Vue.js

I'm new to Vue.js and I struggle with modals. I want to first load the modal window as a user navigates to a certain component. I tried to create some example modal and it opens if I click a button and trigger $('#modalId').modal('show'). But when I try to execute the same command from Vue's created () {...} It does not open a modal window. I don't want to open a modal window with a button click, I want to open as page/component loads.

    <!-- This works fine -->
    <button class="btn btn-dark" @click="openModal" data-target="#loginModal">Open modal</button>

    <!-- MODAL -->
    <div class="modal" ref="modal" id="loginModal" data-keyboard="false" data-backdrop="static">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Insert required data</h5>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="username">Username</label>
                <input type="text" class="form-control">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary" data-dismiss="modal">Submit</button>
            <a href="#" @click="logout" data-dismiss="modal">
              <span>{{ $t('pages.userIconInHeader.signOut') }}</span>
            </a>
          </div>
        </div>
      </div>
    </div>

...

export default {
  name: 'test',
  data () {
    return {}
  },
  created () {
    // HERE I WOULD LIKE TO OPEN MODAL. If it's even possible?
    $(document).ready(function () {
      this.openModal()
    })
  },
  methods: {
    openModal () {
      $('#loginModal').modal('show')
    },

...

Upvotes: 1

Views: 20798

Answers (3)

Tarun Jain
Tarun Jain

Reputation: 689

mounted() {
    this.showModal()
},

methods: {
    showModal() {
     this.$modal.show("model-name")
    },
}

this can be used for opening model in vuejs

Upvotes: 1

MissK
MissK

Reputation: 66

Don't mix jQuery and Vue. Vue works with Virtual DOM and you should update, show, hide elements according to Vue documentation, no work around with jQuery. This is article about creating modal in Vue, I hope it helps https://alligator.io/vuejs/vue-modal-component/

Upvotes: 3

BeHappy
BeHappy

Reputation: 4008

Use in mounted without $(document).ready(function(){}):

mounted() {
  this.openModal();
},

Upvotes: 2

Related Questions