JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
  <dropdown label="Gender" :options="['Male', 'Female']" value="Male"></dropdown>
</div>

<template id="dropdown">
  <div class="ui form" :class="{loading: loading}">
    <div class="field">
      <label>{{label}}</label>
      <div class="ui selection dropdown" :class="{active: visible, visible: visible}" @click="visible = !visible">
        <i class="dropdown icon"></i>
        <div class="text">{{value}}</div>
        <div class="menu" :class="{visible: visible, transition: visible}">
          <div v-for="option in options" class="item" :data-value="option" @click="set(option)" :class="{active: value === option, selected: value === option}">{{option}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

JavaScript

Vue.component('dropdown', {
	template: '#dropdown',
  props: ['label', 'options', 'value'],
  data() {
  	return {
        visible: false,
        loading: false
    }
  },
  methods: {
  	set(option) {
    	this.value = option;
      this.loading = true;
      setTimeout(() => this.loading = false, 3000);
    }
  }
});

new Vue({
	el: '#app',
});