[Vuejs]-Custom Bootstrap ES6(module) for switch-toggle button in VU

by

0👍

Modern frameworks like Vue don’t work well with direct DOM manipulation. If there’s a choice, it may be preferable to use third-party Vue components instead of vanilla JavaScript widgets.

Data attribute won’t work well because it’s suited for static page where DOM elements are available on load.

This widget pollutes built-in prototype which is considered bad practice and should be avoided. Since it also exposes API as a module, this is a preferable way to use it.

I expect it to be something like:

import Switch from 'bootstrap-switch-button';

...

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

...

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

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

Other API methods can be called on this.switch when needed.

It may not work as expected because it directly manipulates DOM and can conflict with Vue.

Leave a comment