Question

我在Vue容器内部有一个崩溃。现在，引导程序的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);

Answer 1

尝试bootstrap-vue

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

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

如何使bootstrap事件在vue中工作

2 个答案: