uiv conflict with bootstrap.mini.js
Closed this issue · 4 comments
Describe the bug
when bootstrap.js appears on the same page with uiv, button groups with data-toggle attributes stops working.
To Reproduce
Steps to reproduce the behavior:
<!DOCTYPE html>
<html>
<body >
<div id="app"><btn_grp_test>/<btn_grp_test></div>
<script type="text/x-template" id="btn_grp_test">
<section class="uiv">
<btn-group>
<btn v-model="model" input-type="checkbox" input-value="1">Checkbox 1</btn>
<btn v-model="model" input-type="checkbox" input-value="2">Checkbox 2</btn>
<btn v-model="model" input-type="checkbox" input-value="3">Checkbox 3</btn>
<btn v-model="model" input-type="checkbox" input-value="4" disabled>Checkbox 4 (Disabled)</btn>
</btn-group>
<hr />
<alert>Selected: {{ model }}</alert>
</section>
</script>
<script type="text/javascript" src="/static/vuejs/vue-2.7.13.js"></script>
<script type="text/javascript" src="/static/uiv/1.4.3/uiv.min.js"></script>
<script type="text/javascript">
Vue.component("btn_grp_test", {
template: "#btn_grp_test",
data() {return {"model": ['1']};},
mounted() {
// without this, group button's model data will stop updating.
// but with this fix, the styling is partially gone and looks broken.
this.$el.getElementsByClassName("btn-group")[0].removeAttribute("data-toggle");
}
});
var vm = new Vue().$mount('#app');
</script>
<script src="/static/appbuilder/js/jquery-latest.js" nonce=""></script>
<script src="/static/appbuilder/js/bootstrap.min.js" nonce=""></script>
</body>
</html>
Expected behavior
Hope there is an official workaround, since bootstrap.js is part of bootstrap and it does have some market. Like in my case, I don't use it, but the framework I used (Flask App Builder) relies on bootstrap.js for menus etc. FAB user's templates are wrapped in the main template, which always source bootstrap.js.
Really, don't want to modify resources in that python package to avoid patching after every update.
Additional context
Not tried, since am not familiar with vue3, but this might also affect uiv2.
It's meant to be a replacement of bootstrap.js, it makes no sense in most cases to include them together. Therefore no solution can be provided here.
uiv and bootstrap.js sharing same css file, some attribute (e.g. data-toggle) must be added, otherwise the style will be broken. bootstrap.js is listening on all elements on the page regardless it's driven by Vue or not, while uiv only affect things inside Vue context. Technically, the problem is on bootstrap side.
That's fine, at least please mention this in the doc,
so that users bumping into such issues won't spend hours debugging these known issues.
Currently <div data-toggle > seems the only one with such noticeable issue, at least dropdown, button and datapicker doesn't not seem to be affected.
tip added to both v1 and v2 doc.
Thanks, that's a tip worth hours. :-)