Dropdown.vue

<!-- A SematicUI Dropdown VueJS Component -->
<template>
    <div :class="classes">
        <div class="text" v-if="showTitle">
            <img :src="selected.avatar" v-if="hasAvatar && selected">
            <span v-text="title"></span>
        </div>
        
        <i class="icon" :class="{ dropdown: ! loading, loading }"></i>

        <a class="ui label grey transition visible" v-for="item in selected" v-if="multiple">
            <span v-text="item.title || item.name"></span>
            <i class="delete icon" @click="toggle(item)"></i>
        </a>

        <div class="menu">
            <div class="item" v-for="item in items" @click="select(item, $event)">
                <img :src="item.avatar" v-if="hasAvatar">
                <span v-text="item.title || item.name"></span>
                <i class="check icon right floated" v-if="multiple && isSelected(item)"></i>
            </div>

            <div class="item fake-disabled" v-if="! items.length" @click="$event.stopPropagation()">
                No items
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['title', 'items', 'loading', 'multiple', 'value', 'hasAvatar', 'customClass'],

        data() {
            return {
                selected: []
            }
        },

        computed: {
            showTitle() {
                return this.multiple ? ! this.selected.length : true;
            },

            classes() {
                let classes = 'ui fluid selection dropdown';

                if (this.multiple)
                    classes += ' multiple';

                if (this.customClass)
                    classes += ' ' + this.customClass;

                return classes;
            }
        },

        methods: {
            toggle(item) {
                this.isSelected(item)
                    ? this.selected = _.reject(this.selected, { id: item.id })
                    : this.selected.push(item);
            },

            isSelected(item) {
                return !! _.find(this.selected, { id: item.id });
            },

            select(item, e) {
                e && e.stopPropagation();

                if (this.multiple) {
                    this.selected.push(item);
                    this.selected = _.uniq(this.selected);
                } else {
                    this.selected = item;
                    this.hide();
                }
            },

            hide() {
                $(this.$el).dropdown('hide');
            }
        },

        watch: {
            value(value) {
                this.selected = value;
            },

            selected(value) {
                this.$emit('input', value);
            }
        },

        mounted() {
            let that = this;

            $(this.$el).dropdown({
                onShow() {
                    that.$emit('open');
                },
                onHide() {
                    that.$emit('hide');
                }
            });
        }
    }
</script>