javascript - Bootstrap按钮插件与Vue复选框点击事件冲突

Question

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

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

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

Answer 1

Vue 和 Jquery 并不意味着在一起，它们在某些时候会发生冲突。

正如 Bootstrap 网站上所说:

Many of our components require the use of JavaScript to function.Specifically, they require jQuery, Popper.js, and our own JavaScriptplugins.

我建议您使用 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/