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

Question

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

...

MissK · Accepted Answer · 2020-04-26 22:41:20Z

3

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/

answered Apr 26, 2020 at 22:41

MissK

663 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BeHappy · Accepted Answer · 2020-04-26 21:57:23Z

2

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

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

answered Apr 26, 2020 at 21:57

BeHappy

4,0265 gold badges30 silver badges67 bronze badges

Comments

Suraj Rao · Accepted Answer · 2021-12-27 08:36:25Z

1

mounted() {
    this.showModal()
},

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

this can be used for opening model in vuejs

edited Dec 27, 2021 at 8:36

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Dec 27, 2021 at 8:11

Tarun Jain

6891 gold badge11 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related