isic-archive icon indicating copy to clipboard operation
isic-archive copied to clipboard

Vue v-model incompatible with Bootstrap 3 radio button group

Open msmolens opened this issue 7 years ago • 0 comments

Binding data to radio inputs using Vue's v-model [1] is incompatible when the inputs are styled as a Bootstrap 3 radio button group [2].

This can be observed for the following radio button group in the annotation tool: https://github.com/ImageMarkup/isic-archive/blob/e7fb1e8ca758a18740d72c51a091261ea7f8bc2f/web_external/vue/components/AnnotationTool/AnnotationToolFeatures.vue#L24

If Bootstrap's button.js is included in the script section (import 'bootstrap/js/button';), then the data binding no longer works: the certainty setter is not called when the buttons are toggled.

Note that since the script doesn't currently include button.js, the data-toggle='buttons' attribute has no effect.

[1] https://vuejs.org/v2/guide/forms.html#Radio [2] https://getbootstrap.com/docs/3.3/javascript/#buttons-checkbox-radio

msmolens avatar May 08 '18 15:05 msmolens