CODEWITHSUNDEEP
twitter-bootstraplaravelvue.js
user3779015
user3779015

Reputation: 499

How to make bootstrap events work inside vue

I have a collapse that is inside of Vue container. now, the hidden.bs.collapse event of bootstrap doesn't work anymore.

I saw a solution that needs to add a ref="" and include it in the mounted However the problem is that the condition inside of hidden.bs.collapse is automatically called even though the event is not yet called.

here's the code..

 methods: {
  test(){
      console.log('test function')
      $('#form_create')[0].reset();
      $(".alert").alert('close')
      $('input,textarea').removeClass('is-invalid')
    },
    test2(){
      console.log('1321');
    }
  },
  mounted() {
    $(this.$refs.createForm).on('hidden.bs.collapse', this.test());
    $(this.$refs.showForm).on('hidden.bs.collapse', this.test2());
  }

EDIT:

silly me. the 2nd parameter of the on shouldn't have ().

$(this.$refs.createForm).on('hidden.bs.collapse', this.test);

Upvotes: 4

Views: 1349

Answers (4)

Dhruvik Ghevariya
Dhruvik Ghevariya

Reputation: 134

<b-modal ref="someModal" @hide="doSometing">

you can use @hide in your modal => In your case

<b-modal ref="createForm" @hide="test()"> <b-modal ref="showForm" @hide="test2()">

Upvotes: 0

SeverityOne
SeverityOne

Reputation: 2721

Have a look at this answer.

Following that, you can do the following:

<create-form
    ...
    v-on="{'hidden.bs.collapse': test}"
>
    ...
</create-form>

...

<show-form
    ...
    v-on="{'hidden.bs.collapse': test2}"
>
    ...
</show-form>

I've found it nigh impossible to find an answer that "just works", with VueJS 3, the composition API, and TypeScript. This doesn't require either the Bootstrap or JQuery JS code, and it works according to VueJS deals with events.

Upvotes: 1

Tanner Mann
Tanner Mann

Reputation: 532

I'm about two years late to this party but for those that find this answer in the future, use event delegation.

The example code would become $(document).on('hidden.bs.collapse', this.$refs.createForm, this.test);

Here's another example of some code that wasn't working for me when the .navbar-collapse element was inside my vue app

$('.navbar-collapse').on('show.bs.collapse hide.bs.collapse', function() {
    $('html').toggleClass('open');
});

Here it works with event delegation:

$('#site-header').on('show.bs.collapse hide.bs.collapse', '.navbar-collapse', function() {
    $('html').toggleClass('open');
});

Upvotes: 0

Luk&#225;š Irs&#225;k
Luk&#225;š Irs&#225;k

Reputation: 1132

Try bootstrap-vue

Mixing Jquery and Vue.js is bad idea, because Vue.js uses Virtual DOM to perform changes, while Jquery uses only native DOM. Vue will not see Jquery changes event if it's works.

Upvotes: 1

Related Questions