JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <select-list v-model="favouriteAnimal" :options="options"></select-list>
  <p>Your selection was: {{ favouriteAnimal }}</p>
</div>

JavaScript

const SelectList = {
  template: `
    <select v-model="selectValue">
	    <option :value="0" disabled>- Please select -</option>
  	  <option
    	  v-for="(option, index) in options"
      	:key="index"
      	:value="option.id"
    	>{{ option.name }}</option>
  	</select>
  `,
  props: {
    value: {
      type: Number,
      required: true
    },
    options: {
      type: Array,
      required: true
    }
  },
  computed: {
    selectValue: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
	  }
  }
}

new Vue({
	data () {
		return {
      favouriteAnimal: 0,
      options: [
        { id: 1, name: 'Dog' },
        { id: 2, name: 'Cat' },
        { id: 3, name: 'Rabbit' }
      ]
    };
  },
  components: {
    SelectList
  }
}).$mount('#app')