Bind select to vue

Topic: Bind select to vue

peter.andreasson pro asked 6 years ago

Hello, I am trying to make the select component work with Vue. The on change event never fires when the selected options is changed and the value is never binded to the 'selected' data property in the Vue component. I am using the regular jQuery and css PRO version of mdb. The html code looks like this:

<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?

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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 6 years ago

Hi Jakub, Thanks for the reply! Do you have an example on how I can accomplish this?

Jakub Strebeyko staff commented 6 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

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

peter.andreasson

Pro User 0Support score
2Questions 0Answers 0Snippets