Custom Bootstrap ES6 (модуль) для переключателя в VU

Question

Мне нужно использовать пользовательский переключатель toogle в приложении Vue.

https://github.com/gitbrent/bootstrap-switch-button

это кнопка, которая мне подходит, но я понятия не имею, как зарегистрировать его в моем компоненте, чтобы он мог обрабатывать атрибут data-toggle. <input id="chkSwitch" type="checkbox" data-toggle="switchbutton">

Answer 1

Современные фреймворки, такие как Vue, плохо работают с прямым манипулированием DOM. Если есть выбор, может быть предпочтительнее использовать сторонние Vue компоненты вместо ванильных JavaScript виджетов.

Атрибут данных не будет хорошо работать, потому что он подходит для страницы stati c, где DOM элементы доступны при загрузке.

Этот виджет загрязняет встроенный прототип , что считается плохой практикой, и его следует избегать. Так как он также представляет API как модуль, это предпочтительный способ его использования.

Я ожидаю, что это будет что-то вроде:

import Switch from 'bootstrap-switch-button';

...

<input ref="btn" type="checkbox">

...

mounted() {
  this.switch = new Switch(this.$refs.btn, { ... });
}

destroyed() {
  this.switch.destroy();
}

Другие методы API могут быть вызваны на this.switch при необходимости.

Может работать не так, как ожидалось, поскольку напрямую манипулирует DOM и может конфликтовать с Vue.