如何使引导事件在 vue 中工作答案

【问题标题】：How to make bootstrap events work inside vue如何使引导事件在 vue 中工作
【发布时间】：2020-05-23 11:43:05
【问题描述】：

我在 Vue 容器内有一个崩溃。现在，bootstrap 的hidden.bs.collapse 事件不再起作用了。

我看到一个solution 需要添加一个ref="" 并将其包含在mounted 中但是问题是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());
  }

编辑：

愚蠢的我。 on 的第二个参数不应该有 ()。

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

【问题讨论】：

标签： twitter-bootstrap laravel vue.js

【解决方案1】：

试试bootstrap-vue

混合使用 Jquery 和 Vue.js 是个坏主意，因为 Vue.js 使用 Virtual DOM 来执行更改，而 Jquery 只使用原生 DOM。如果有效，Vue 将不会看到 Jquery 更改事件。

【讨论】：

【解决方案2】：

我迟到了两年左右，但对于那些在未来找到这个答案的人，请使用event delegation。

示例代码将变为$(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');
});

【讨论】：