javascript - How to show modal on componentpage createdload in Vue.js - Stack Overflow

admin管理员组

文章数量:1348081

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 ponent. 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 mand 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/ponent 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')
    },

...

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 ponent. 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 mand 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/ponent 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')
    },

...

• javascript
• vue.js
• bootstrap-modal

Share Improve this question Follow asked Apr 26, 2020 at 21:51 HadzoHadzo 32811 gold badge44 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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-ponent/

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

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

mounted() {
    this.showModal()
},

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

this can be used for opening model in vuejs

本文标签： javascriptHow to show modal on componentpage createdload in VuejsStack Overflow