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!
No comments:
Post a Comment