Change event doesn't activate with VueJS 2 using Materialize CSS Select component

Question

I'm trying to make cascading combo-boxes, and stuck with a problem: VueJS doesn't see change event of Materialize select element. Here is my code:

let app = new Vue({
  el: '#app',
  data: {
    elements: [
      {'id' : 1, 'text' : 'Option 1'},
      {'id' : 2, 'text' : 'Option 2'}
    ]
  },

  updated() {
    $('select').material_select();
  },

  methods : {
    onChange() {
      alert('Option changed!');
    }  
  }
});

$('select').material_select();

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<div class="container" id="app">
  <div class="row">
    <div class="input-field col s12 m6">
      <select name='somename' id='somename' @change='onChange()'>
        <option selected="" disabled="" value="">Choose your make</option>
        <option v-for="option in elements" :value="option.id">{{option.text}}</option>
      </select>
      <label>Car make</label>
    </div>
  </div>

  <select class="browser-default" name='somename' id='somename' @change='onChange()'>
    <option selected="" disabled="" value="">Choose your make</option>
    <option v-for="option in elements" :value="option.id">{{option.text}}</option>
  </select> 
</div>

If changing JS code to handle the 'change' event with jQuery - it works.

$('#somename').on('change', function(){alert('Changed - JQUERY')});

Really, don't understand what's the problem here. If executing that vue code on plain html components - it also works.

The issue is that jQuery events and Vue events are different things. So, materialize is firing a "change" event on the select element, but this is not what Vue is listening for. As panicoper says in their answer, you can create a wrapper component to hook up the functionality. However, that'll get pretty involved if you want to implement all of the materialize functionality in a component. Luckily, for most common libraries like this, someone has already implemented a Vue wrapper. In this case: github.com/paulpflug/vue-materialize — thanksd
– thanksd, Commented Nov 9, 2017 at 14:09

tony19 · Accepted Answer · 2022-07-15 20:45:39Z

6

When you use jquery and vue like this case the manipulation of DOM is done by jquery, so you would 'emit' an event to vue, then vue can realize the changes in te view or his values. Sorry for my bad english.

Here some example in documentation of vue and codepen

 mounted() {
    var self = this;//vue
      $('#vueSelect').material_select();
      $('#vueSelect').on('change', function () {            
        console.log("Change from Wrapper!", this.value)
        self.$emit("change", this.value)
      });
    self.$on("change", function(data){
       console.log('Option changed!', data);
      this.selected = data
    });       
  }

edited Jul 15, 2022 at 20:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 9, 2017 at 13:39

panicoper

1,0541 gold badge12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sergiu Over a year ago

I've implemented this in my app, and it's working! Thanks.

Collectives™ on Stack Overflow

Change event doesn't activate with VueJS 2 using Materialize CSS Select component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related