vue 多次调用组件冲突

Question

自己封装了一个select的组件，写好了，测试一切正常，然鹅，如果页面调用多次的话，就冲突了。展开一个，所有组件都展开了，选择一个，所有的都跟着变

select 组件

<template id="selectComponent">
    <div class="dropdown">
        <button class="form-control dropdown-toggle text-left" type="button">
            {{selectList[current]&&selectList[current].name}}
        </button>
        <div class="dropdown-menu btn-block" :class="{show:showSelect}">
            <button class="dropdown-item" type="button" v-for="(item,index) in selectList" :data-index="index">{{item.name}}</button>
        </div>
    </div>
</template>
<script>
var dataid = ('selectComponent' + new Date().getTime() + Math.random()).replace('.', '');
var tpEl = getDom('#selectComponent').content.querySelector('.selectComponent');
tpEl.dataset.id = dataid;
Vue.component('selectComponent', {
    template: '#selectComponent',
    data: function() {
        var vm = this;
        return {
            showSelect: false,
            current: 0,
        }
    },
    props: ['list'],
    computed: {
        selectList: function() {
            return this.list;
        }
    },
    mounted: function() {
        var vm = this;
        document.addEventListener('click', function(event) {
            var el = event.target;
            if (el.dataset.id == dataid || el.closest('[data-id=' + dataid + ']')) {
                if (el.classList.contains('dropdown-toggle')) {
                    vm.showSelect = !vm.showSelect;
                } else {
                    if (el.classList.contains('dropdown-item')) {
                        vm.current = el.dataset.index;
                    }
                    vm.showSelect = false;
                }
            } else {
                vm.showSelect = false;
            }
        }, false);
    },
    watch: {
        current: function(index) {
            this.$emit('change', index);
        }
    }
});
</script>

调用方法：
<select-component @change="change" :list.sync="[{value:1,name:'test'}]"></select-component>

Answer 1

vue有click也是事件委托，为什么混着用原生的？如果理不清两者的区别，尽量不要混着用，能用vue的事件系统，就用vue，框架会给你优化的。