JSFiddle - React, Tailwind, and code Playground

by Jay Angelo Valmocina

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
  <active-dropdown inline-template 
    :selected='selected' 
    :options='active_options'>
    
    
    

     <div class="form-group">
         <select 
           v-model="selectedOption" 
           v-on:change="notify_selection">
           <option 
             v-for="option in options" 
             :value="option.text">{{ option.text }}
            </option>
          </select>
        </div>
  </active-dropdown>
  <div class="selected">
    <b> Selected - {{ selected }} </b>  
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Fahkwang');
body {
  font-family: 'Fahkwang', sans-serif;
  font-size: 14px;
  background: #ecf0f1;
}

 
.selected {
  border: none;
  padding: 20px;
  box-shadow: 0px 2px 2px lightgrey;
  width: 25%;
}

select  {
  color: black;
  font-weight: bold;
  width: 32%;
  border: none;
  padding: 15px;
  box-shadow: 0px 2px 2px lightgrey;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  background: #1D976C;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #93F9B9, #1D976C);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #93F9B9, #1D976C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

JavaScript

Vue.component('active-dropdown', {
  props: ['options', 'selected'],
  data() {
    return {
      selectedOption: ''
    }
  },
  methods: {
    notify_selection() {
      this.$parent.$emit('update', this.selectedOption);
    }
  },
  created() {
    this.selectedOption = this.selected;
  }
});

new Vue({
  el: '#app',
  created() {
    this.$on('update', (selection) => {
      this.selected = selection;
    })
  },
  data: {
    active_options: [{
      text: 'Travaille'
    }, {
      text: 'Hygge'
    }, {
      text: 'Respeber'
    }],
    selected: 'Respeber'
  }
})