Vuejs Custom Select

by John Passmore

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- main app myComp -->    
<div id="myComp">
        <div>
            <span>Color:</span>
            <select v-model="color">
                <option v-for="option in colors" :value="option.optionId">
                    {{ option.text }}
                </option>
            </select>
        </div>
        <div>
          <span>Color Custom: </span>
<!-- insert custom component here -->
          <custom-select 
             v-model="color"
             :options="colors">
          </custom-select>
        </div>
        <div>{{ this.$data }}</div>
    </div>
    
 <template id="custom-select">
    <select v-model="selected" @change="onChange($event.target.value)">
      <option v-for="option in options"
        :value="option.optionId"
      >{{option.text}}</option>
    </select>
</template>

Babel + JSX

Vue.component('custom-select', {
  template: '#custom-select',
  props: [
                'value',
                'options'
               ],
  computed: {
    selected () {
        return this.value
  }
  },
  methods: {
    onChange(value) {
    	if (value === '') {
      	value = null;
      }
    	this.$emit('input', value);
    }
  }
})

var app = new Vue({
    el: '#myComp',
    created: function () {
    	const vm = this;
    	setTimeout(
           function () {
             vm.colors = [
               { text: 'Yellow', optionId: 'YELLOW'},
               { text: 'Not selected', optionId: null },
               { text: 'Blue', optionId: 'BLUE'} 
              ];
           },
        1000);
    },
  data: {
    color: null,
    colors: []
   }
});