How to make bootstrap events work inside vue

Question

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);

Mr Lister · Accepted Answer · 2018-05-25 14:13:50Z

1

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.

edited May 25, 2018 at 14:13

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered May 25, 2018 at 13:41

Lukáš Irsák

1,1321 gold badge16 silver badges24 bronze badges

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

Comments

SeverityOne · Accepted Answer · 2022-08-29 10:43:35Z

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.

Tanner Mann · Accepted Answer · 2020-05-23 03:43:05Z

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

Dhruvik Ghevariya · Accepted Answer · 2022-08-29 10:49:23Z

0

<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()">

answered Aug 29, 2022 at 10:49

Dhruvik Ghevariya

1542 bronze badges

Collectives™ on Stack Overflow

How to make bootstrap events work inside vue

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related