Vuejs + Materializecss select field

It seems that Materialize doesn't dispatch any events so I couldn't find an elegant solution. But it does seem that the following Vuejs directive + jQuery workaround is working:

Vue.directive("select", {
    "twoWay": true,

    "bind": function () {
        $(this.el).material_select();

        var self = this;

        $(this.el).on('change', function() {
            self.set($(self.el).val());
        });
    },

    update: function (newValue, oldValue) {
        $(this.el).val(newValue);
    },

    "unbind": function () {
        $(this.el).material_select('destroy');
    }
});

And then in your HTML – bind <select> using v-select instead of v-model.


Vue.js 2.0

Template:

<div v-text="selected"></div>
<material-select v-bind="selected = selected || options[0].value" v-model="selected">
     <option v-for="option in options" :value="option.value" v-text="option.name"></option>
</material-select>

Component:

"use strict";

Vue.component("material-select", {
    template: '<select><slot></slot></select>',
    props: ['value'],
    watch: {
        value: function (value) {

            this.relaod(value);
        }
    },
    methods:{
      relaod : function (value) {

          var select = $(this.$el);

          select.val(value || this.value);
          select.material_select('destroy');
          select.material_select();
      }
    },
    mounted: function () {

        var vm = this;
        var select = $(this.$el);

        select
            .val(this.value)
            .on('change', function () {

                vm.$emit('input', this.value);
            });

        select.material_select();
    },
    updated: function () {

        this.relaod();
    },
    destroyed: function () {

        $(this.$el).material_select('destroy');
    }
});

Vue.directive('material-select', {
        bind:function(el,binding,vnode){
            $(function () {
                $(el).material_select();

            });
            var arg = binding.arg;
            if(!arg)arg="change";
            arg = "on"+arg;
            el[arg]=function() {
            	
                if (binding.expression) {
                    if (binding.expression in vnode.context.$data) {
                        vnode.context.$data[binding.expression] = el.value;

                    } else if (vnode.context[binding.expression] &&
                            vnode.context[binding.expression].length <= 1) {
                            vnode.context[binding.expression](el.value);

                    } else {
                        throw new Error('Directive v-' + binding.name + " can not take more than 1 argument");
                    }
                    

                }
                else {
                    throw new Error('Directive v-' + binding.name + " must take value");
                }
            }

        },
        unbind:function(el) {
            $(el).material_select('destroy');
        }
});


new Vue({
  el: '#exemple1',
  data:function(){
    return {
    	selected: '',
	    options:[
	        {value:"v1",text:'description 1'},
	        {value:"v2",text:'description 2'},
	        {value:"v3",text:'description 3'},
	        {value:"v4",text:'description 4'},
	        {value:"v5",text:'description 5'},
	    ]
	  }
	}
});
      
new Vue({
  el: '#exemple2',
  data:function() {
    return{
    	selected: null,
	    options:[
	        {value:"v1",text:'description 1'},
	        {value:"v2",text:'description 2'},
	        {value:"v3",text:'description 3'},
	        {value:"v4",text:'description 4'},
	        {value:"v5",text:'description 5'},
	    ]
	}
  },
  methods:{
    change:function(value){
        this.selected = value;
        alert(value);
    }
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<h4>vue js materialize</h4>
<h5>Exemple1</h5>
<div id="exemple1">
    <select v-material-select:change="selected" class="blue-text">
        <option value="" disabled selected ><slot>Defaut message</slot></option>
        <option v-for="option in options" :value="option.value">{{ option.text}}</option>
    </select>
</div>

<h5>Exemple2</h5>
<div id="exemple2">
    <select v-material-select:change="change" class="blue-text">
        <option  disabled selected ><slot>Choisir Votre Abonnement</slot></option>
        <option v-for="option in options" :value="option.value">{{ option.text}}</option>
    </select>
</div>