VueSelectSimple.vue

<template>
    <div>

        <div class="select-input" @click="toggle()">
            <span>{{label}}</span>
            <i class="select-arrow" :class="{active: show}"></i>
        </div>

        <ul class="dropdown-input" v-show="show">
            <li v-for="(key, opt) in options" @click="select(key), show = !show">
                {{opt.label}}
            </li>
        </ul>
    </div>
</template>

<script>
    import vSelect from "vue-select"
    export default {
        components: {vSelect},
        props: {
            options: {
                type: Object,
                default: {
                    one: {
                        label: 'One',
                    }
                }
            },
            value: {
                default: '',
            }
        },
        methods: {
            toggle(){
                this.show = !this.show;
            },
            select(key){
                this.selected = this.value = key;

                if(typeof this.options[key] == 'undefined'){
                    return;
                }
                this.label = this.options[key].label
            }
        },

        data() {
            return {
                show: false,
                label: ''
            }
        },
        ready(){
            this.select(this.value);
        }
    }
</script>

<style lang="scss" scoped>
    ul
    {
        padding: 0;
        margin: 0;
        list-style-type: none;
        position: absolute;
        width: 100%;
        z-index: 10000;
        background: #f9f9f9;
        border: 1px solid #e1e1e1;
        border-top: none;
        -webkit-box-shadow: 0px 2px 2px -1px rgba(125,125,125,1);
        -moz-box-shadow: 0px 2px 2px -1px rgba(125,125,125,1);
        box-shadow: 0px 2px 2px -1px rgba(125,125,125,1);

        li{
            padding: 8px 21px;
            cursor: pointer;

            border-bottom: 1px solid #ccc;

            &:last-child{
                border-bottom: none;
            }

            &:hover {
                background: rgba(117, 209, 255, 0.67);
                color: #ffffff;
            }
        }
    }

    i.select-arrow{
        margin-top: 7px;
        margin-right: -9px;
        float: right;
        width: 9px;
        height: 5px;
        display: block;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAABGdBTUEAALGPC/xhBQAAAG9JREFUCB1j9Pb27vn//38xAw7AyMjYy7RlyxYGR0dHrEpA4iB5JqBsaX5+/jJDQ0MUhSA+UHw5SB4sAbSO9cuXL3uBgv+9vLz+g2gQHySOohMowPP27dsLtbW1/0E0iI+iAMYBSogB8Q4QDRMD0QCOUj5k6sEc8gAAAABJRU5ErkJggg==');
        &.active{
            -moz-transform: rotate(180deg);  /* Firefox */
            -o-transform: rotate(180deg);  /* Opera */
            -webkit-transform: rotate(180deg);  /* Safari y Chrome */
        }
    }

    .select-input{
        cursor: pointer;
        padding: 8px 21px;
        border: 1px solid #e1e1e1;
        border-bottom: 2px solid #e1e1e1;
        border-radius: 3px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fbf7f7+0,ebebeb+100 */
        background: rgb(251,247,247); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(251,247,247,1) 0%, rgba(235,235,235,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(251,247,247,1) 0%,rgba(235,235,235,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(251,247,247,1) 0%,rgba(235,235,235,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbf7f7', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
    }
</style>