如何使 Bootstrap 事件在vue中工作

2g32fytz 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(206)

我有一个崩溃是在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);

twitter-bootstrap

来源：https://stackoverflow.com/questions/50529687/how-to-make-bootstrap-events-work-inside-vue

4条答案

按热度按时间

b4lqfgs41#

尝试bootstrap-vue
混合Jquery和Vue.js是个坏主意，因为Vue.js使用虚拟DOM来执行更改，而Jquery只使用本地DOM。如果Jquery可以工作，Vue将看不到它的更改事件。

赞(0）回复(0）举报 2022-12-07

1qczuiv02#

看一看this answer。
然后，您可以执行下列操作：

<create-form
    ...
    v-on="{'hidden.bs.collapse': test}"
>
    ...
</create-form>

...

<show-form
    ...
    v-on="{'hidden.bs.collapse': test2}"
>
    ...
</show-form>

我发现用VueJS 3、合成API和TypeScript几乎不可能找到一个“正常工作”的答案。这不需要Bootstrap或JQuery JS代码，它根据VueJS处理事件来工作。

赞(0）回复(0）举报 2022-12-07

niwlg2el3#

我已经晚了两年了，但是对于那些在未来找到这个答案的人，请使用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');
});

赞(0）回复(0）举报 2022-12-07

kgqe7b3p4#

〈b-模态参考=“一些模态”@隐藏=“doSometing”〉
您可以在您的模式中使用@hide =〉在您的情况下
测试结果显示，该方法可以有效地提高测试结果的准确性。

赞(0）回复(0）举报 2022-12-07

我来回答

如何使 Bootstrap 事件在vue中工作

4条答案

相关问题

热门标签

最新问答