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

Answer 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.

Answer 2

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.