Topic: Bind select to vue
<div id="select_test">
<select class="mdb-select" v-model="selected" v-on:change="onChange">
<option v-for="item in options" v-bind:value="item">{{ item }}</option>
</select>
</div>
Vue script:
new Vue({
el: '#select_test',
data: {
options: ['a', 'b', 'c'],
selected: 'a'
},
methods: {
onChange: function () {
console.log(this.selected);
}
}
});
If i do not use mdb-select this code works, how can i get it to work with your select component?
Hi there Peter,
The behavior is as expected. MDB select inspection reveals the component acquires its material design features by hiding (as in display: none !important) the select.mdb-select element and inserting a set of custom ones instead (starting with the encompassing .select-wrapper element). Any further manipulation (like Vue data binding) should be therefore conducted upon these elements inserted by .material_select() method, and not on the ones being hidden (and redundant).
With Best Regards,
Kuba
peter.andreasson pro commented 7 years ago
Hi Jakub, Thanks for the reply! Do you have an example on how I can accomplish this?Jakub Strebeyko staff commented 7 years ago
Hi Peter, Don't get me wrong, I stated the above a general rule; it does not mean have tested ways to it. MDB has a separate version for Vue, and as such the jQuery version does not get tested against Vue use-cases. From as far as I investigated it, you need to use Vue interpolation first (so it populates the original<select> element, as expected) and only then (after the page's first render, that is) somehow initialize the .mdb-select itself. A 'click' event listener attached to a button and initializing the select works fine, for example.
With Best Regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No