JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
  `{{ components.$ramo.value }}`
  <select name="ramo">
      <option v-for="option in components.$ramo.data" :value="option.id">
        {{ option.name }}
      </option>
  </select>

  `{{ components.$categoria.value }}`
  <select name="categoria">
      <option v-for="option in components.$categoria.data" :value="option.id">
        {{ option.name }}
      </option>
  </select>

</div>

CSS

#app {
  padding: 10px
}

JavaScript

app = new Vue({
  el: '#app',
  data: {
    components: {
      $ramo: {
     		ref: undefined,
        value: undefined,
        data: []
      },
      $categoria: {
     		ref: undefined,
        value: undefined,
        data: []
      }
    }
  },
  mounted: function () {

		this.components.$ramo.data = [{id: '1', name: 'A'}, {id: '2', name: 'B'}, {id: '3', name: 'C'}, {id: '4', name: 'D'}, {id: '5', name: 'E'}];

		this.components.$categoria.data = [{id: '1', name: 'A'}, {id: '2', name: 'B'}, {id: '3', name: 'C'}, {id: '4', name: 'D'}];

  	const vm = this;
    window.setTimeout(function () {
    		['ramo', 'categoria'].forEach(function (name) {

          vm.components['$' + name].ref = $('[name="' + name + '"]');
          vm.components['$' + name].ref.material_select()

          vm.components['$' + name].ref.change(function() {
            vm.components['$' + name].value = $(this).val();
          });
    	}, 500);
    });
  }
});