Change event not fired using VueJS 2 using Materialize CSS Select component

Question

I am trying to create cascading combo boxes and have a problem: VueJS does not see the change event of the 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 you change the JS code to handle the "change" event using jQuery, it works.

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

In fact, I do not understand what the problem is. If you run this vue code on simple html components - it also works.

Answer 1

When you use jquery and vue, as is the case, the DOM is manipulated with jquery, so you will emit an event for vue, then vue can implement changes in the representation of te or its values. Sorry for my bad english.

Here is an example in the vue and codepen documentation

  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 }); } 

Answer 2

Unfortunately, this strange behavior causes MDL. Without MDL, everything works as expected. MDL is dependent on jQuery and this is a problem. If you want to work correctly with the Vue application, you cannot use libraries like MDL, which modifies the DOM with jQuery help. If possible, I recommend using only CSS frameworks such as bulma.io and others. Hm ... use ANY response / grid mode, but only those that are not JS / jQuery dependent.

 let app = new Vue({ el: '#app', data: { elements: [ {'id' : 1, 'text' : 'Option 1'}, {'id' : 2, 'text' : 'Option 2'} ] }, methods : { onChange() { alert('Option changed!'); } } }); 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://unpkg.com/vue"></script> <div id="app"> <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> <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> </div>