Плагин кнопки начальной загрузки, конфликтующий с событием клика по флажку Vue - PullRequest
Новая
       32

Плагин кнопки начальной загрузки, конфликтующий с событием клика по флажку Vue

0 голосов
/ 17 июня 2019

Когда я добавляю bootstrap.min.js в свое приложение Vue, мое событие checkboxes @click не инициируется.В частности, при использовании загрузчика 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 Button
https://getbootstrap.com/docs/4.3/components/buttons/#button-plugin

1 Ответ

1 голос
/ 17 июня 2019

Vue и Jquery не должны быть вместе, и в какой-то момент они будут конфликтовать.

Как сказано на сайте Bootstrap:

Многие из наших компонентов требуют использования JavaScript для работы. В частности, они требуют jQuery, Popper.js и нашего собственного JavaScript плагины.

Я бы порекомендовал вам использовать bootstrap-vue или, если вы хотите попробовать другой фреймворк, Element или Vuetify:

https://bootstrap -vue.js.org / документы / компоненты / кнопка-группа

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

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

Если вам ДЕЙСТВИТЕЛЬНО НУЖНО ЭТО, вы можете использовать компонент оболочки , но лучше его избегать.

Вот еще несколько подробностей о том, как с этим бороться: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

...