2018-12-30

[SOLVED] Using Bootstrap-Select and Vue together

I ran into some trouble when trying to use Vue bindings and Bootstrap-Select together that kept the visual controls from updating when options were changed via a Vue model update. 

I wrote up an article on my JavaScriptJedi.com website with both broken and working examples and an explanation about what happens.

The quick answers for making sure bootstrap-select works with Vue:

  • Prevent bootstrap-select from automatically hooking itself up to your controls by avoiding using the "selectpicker" class on the <select> element.  Use a different class like "select-picker" instead that you can manually hook up the selectpicker after your Vue model is finished mounting.
    • (Use Vue's $nextTick function inside your "mounted" handler function to ensure all components/child-components are mounted as well before setting up bootstrap-select)
  • Only use the "title" HTML attribute on your <select> when you don't have a default selected value on your <select>
  • ALWAYS call bootstrap-select's "refresh" after changing the <select>'s options via an update to the Vue model.
Please see my write-up on JavaScript Jedi and leave feedback here if you can help me enhance the article or find it helpful.  I hope this saves someone some time and frustration!