Question

当我将bootstrap.min.js添加到Vue应用程序时，我的复选框@click事件未启动。更具体地说，当将引导程序的button-group与data-toggle="buttons"一起使用时，如果我删除了bootstrap.min.js，则复选框click事件将正常工作。是什么原因造成的？

链接到Codepen
https://codepen.io/ben_jammin/pen/gNPVvw?editors=1000

  <div class="btn-group btn-group-toggle shadow mb-3" data-toggle="buttons" role="group" aria-label="String Operations">
    <label class="btn btn-primary">
      <input @click="reverseString" type="radio" name="options" checked> Reverse
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options"> Palindrone
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options"> Uppercase
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options"> Reset
    </label>
  </div>

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js

引导按钮插件
https://getbootstrap.com/docs/4.3/components/buttons/#button-plugin

Answer 1

Vue和Jquery并不在一起，并且在某些时候会发生冲突。

如在Bootstrap网站上所说：

我们的许多组件都需要使用JavaScript才能起作用。具体来说，它们需要jQuery，Popper.js和我们自己的JavaScript 插件。

我建议您使用bootstrap-vue，或者如果您想尝试其他框架Element或Vuetify：

https://bootstrap-vue.js.org/docs/components/button-group

https://element.eleme.io/#/en-US/component/installation

https://vuetifyjs.com/en/components/button-groups

如果您确实需要它，可以使用wrapper component，但最好避免使用它。

以下是有关处理方法的更多详细信息：https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Bootstrap按钮插件与Vue复选框单击事件冲突

1 个答案: