Vue.js custom select component with v-model

Question

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

Answer 1

As Vue Guide said:

v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.

The syntax sugar will be like:

the directive=v-model will bind value, then listen input event to make change like v-bind:value="val" v-on:input="val = $event.target.value"

So for your use case, you need to create one prop=value, then emit the selected option with event=input.

Like below demo (bind/emit the whole option object):

Vue.config.productionTip = false
Vue.component('child', {
  template: `

        

            {{value ? value.name : 'Select Fruit'}}
            
            
            
        
        

            

                  {{option.name}}
            
        
    
`,

  methods: {
    selectOption(option) {
      this.$emit('input', option)
    }
  },
  data: () => ({
  	showOptions: false
  }),
  props: ['options', 'value']
});

var vm = new Vue({
  el: '#app',
  data: () => ({
	options: [
  {id: 0, name: 'Apple'},
  {id: 1, name: 'Banana'},
  {id: 2, name: 'Orange'},
  {id: 2, name: 'Strawberry'},
  ],
  selectedFruit: ''
  }),
})

 .component__select {
   height: 38px;
   background-color: #F5F7FA;
   border: 1px solid #ffffdffffd;
   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 #ffffdffffd;
   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 #ffffdffffd;
 }

 .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 #ffffdffffd;
 }

 .cust-sel:focus {
   outline-width: 0;
 }

   This is parent component
  
I want to have data from select here:  "{{selectedFruit}}"