Twitter bootstrap 如何使引导事件在vue中工作

我有一个在Vue容器内部的折叠。现在，引导的

hidden.bs.collapse

事件不再起作用

我看到一个需要添加一个

ref=“”

并将其包含在

挂载的
中，但是问题是
hidden.bs.collapse
中的条件会被自动调用，即使事件尚未调用

这是密码

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

编辑：

我真傻。
上的
的第二个参数不应具有
（）

试一试

混合使用Jquery和Vue.js是个坏主意，因为Vue.js使用虚拟DOM来执行更改，而Jquery只使用本机DOM。如果Jquery更改事件有效，Vue将不会看到它
 我参加这次聚会晚了两年左右，但对于那些在未来找到答案的人，请使用

示例代码将变成
$（document）.on（'hidden.bs.collapse'，this.$refs.createForm，this.test）

下面是另一个例子，当
.navbar collapse
元素在我的vue应用程序中时，一些代码对我不起作用

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

在这里，它与事件委派一起工作：

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

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