CODEWITHSUNDEEP
jqueryvue.js
SteveV
SteveV

Reputation: 441

Replace Jquery Modal Call with VueJS

New to Vue.js and trying to translate a Jquery call to Vue.js. Seems like it should be simple?

Just installed bootstrap-vue library, and was told this will help eliminate the need for JQuery.

What I'd like to move to vue.js: $('#modal-time-picker').modal();

Not quite sure of the method to do this? Any advice?

Upvotes: 0

Views: 258

Answers (1)

Cathy Ha
Cathy Ha

Reputation: 1677

So, there are several ways to do this, according to the documentation: https://bootstrap-vue.js.org/docs/components/modal/

I'll talk about two of the more vue-esque ways to do it here.

1) Use $refs instead of $('#modal-time-picker'):

template portion:

<b-modal ref="my-modal">
</b-modal>

script portion:

    methods: {
      showModal() {
        this.$refs['my-modal'].show()
      },
      hideModal() {
        this.$refs['my-modal'].hide()
      }
    }

2) The (imo) most Vue-esque way of doing it, using v-model:

template portion:

<b-button @click="modalShow = !modalShow">Open Modal</b-button>
<b-modal v-model="modalShow">
</b-modal>

script portion:

  export default {
    data() {
      return {
        modalShow: false
      }
    }
  }

Upvotes: 1

Related Questions