title: Vue.js custom select component with v-model
body: <p>I want to create a custom select component in Vue.js. Since I need  specific options styling, I need to create 'select' made of div's etc that looks and acts like a real html select. </p>
  
  <p>Currently I have something like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('child', {
    template: `&lt;div class="component-container"  @click="showOptions = !showOptions"&gt;
          &lt;div class="component__select"&gt;
              &lt;span class="component__select--name"&gt;Select Fruit&lt;/span&gt;
              
              &lt;span class="c-arrow-down" v-if="!showOptions"&gt;&lt;/span&gt;
              &lt;span class="c-arrow-up" v-if="showOptions"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;ul class="component__select-options" v-if="showOptions" &gt;
              &lt;li class="select--option" v-for="option in options"&gt;
                  &lt;label&gt; &lt;input type="checkbox" :value="option"/&gt; {{option.name}}&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;`,
  
    methods: {
      selectOption(option) {
        this.$emit('option', option)
      }
    },
    data: () =&gt; ({
    showOptions: false,
    }),
    props: ['options']
  });
  
  var vm = new Vue({
    el: '#app',
    data: () =&gt; ({
   options: [
    {id: 0, name: 'Apple'},
    {id: 1, name: 'Banana'},
    {id: 2, name: 'Orange'},
    {id: 2, name: 'Strawberry'},
    ],
    selectedFruit: ''
    }),
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .component__select {
     height: 38px;
     background-color: #F5F7FA;
     border: 1px solid #dddddd;
     line-height: 38px;
     display: grid;
     max-width: 500px;
     grid-template-columns: 10fr 1fr;
   }
  
   .component__select--name {
     font-size: 0.8rem;
     padding: 0 0 0 25px;
     cursor: pointer;
   }
  
   .c-arrow-down {
     justify-self: end;
   }
  
   .component__select-options {
     max-height: 180px;
     border: 1px solid #dddddd;
     border-top: none;
     overflow: auto;
     position: absolute;
     z-index: 1500;
     max-width: 500px;
     width: 500px;
     margin: 0;
     padding: 0;
   }
  
   .select--option {
     height: 35px;
     display: grid;
     align-content: center;
     padding: 0 0 0 25px;
     background-color: #f5f5fa;
     border-bottom: 1px solid #dddddd;
   }
  
   .select--option:last-child {
     border-bottom: none;
   }
  
   .select--option:nth-child(2n) {
     background-color: #ffffff;
   }
   
   .select--option input{
     display: none;
   }
  
   .single-option {
     height: 55px;
     background-color: #2595ec;
     font-size: 0.8rem;
     border: 1px solid red;
   }
  
   .cust-sel {
     width: 200px;
     height: 38px;
     background-color: #f5f5fa;
     border: 1px solid #dddddd;
   }
  
   .cust-sel:focus {
     outline-width: 0;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;An example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;span&gt; This is parent component&lt;/span&gt;
      &lt;p&gt;I want to have data from select here:  "{{selectedFruit}}"&lt;/p&gt;
      &lt;child :options="options" v-model="selectedFruit"&gt;&lt;/child&gt;
    &lt;/div&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But my problem is now how to return data from child to parent component using v-model on child component. </p>
  
  <p>(I know I could emit data from child component and do:<br>
  <code>&lt;custom-select :options="someOptions" @selected="setSelectedOption"/&gt;</code><br>
   but I need it to be reusable and writing more and more methods to retrieve data from every select in parent component is not exactly how it should work I think.)</p>
  
  <p>Also I need to have an entire object returned, not only ID. (that's why i've got <code>:value="option"</code>)
  Any ideas? </p>