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

...

Answer 1

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

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

Answer 2

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/

Answer 3

mounted() {
    this.showModal()
},

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

this can be used for opening model in vuejs