Как правильно закрывать select?

Question

[Aleksandr]

Как правильно закрывать открытый select при открытие другого?

<template>
      <div>
        <div class="vue-dropdown" :class="{'vue-active': toggle}">
            <span :class="{'el-icon-arrow-up' : toggle, 'el-icon-arrow-down' : !toggle}" @click="toggle = !toggle">{{ value.length ? value : defaultValue }}</span>
            <div class="vue-dropdown-collapsed" v-if="this.toggle">
                <input type="text" v-model="search" v-if="showSearch === 'true'" :placeholder="inputPlaceholder" @click="toggle == true">
                <ul>
                    <li v-for="(option, index) in options" :key="index" @click="update(option), selectedItem = option" v-if="option.name.toLowerCase().indexOf(search.toLowerCase()) !== -1">{{ option.name }}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

Answer 1

[Антон Антон]

можно сдеать общий event bus на все селекты, подписаться на открытие и устанавливать состояние в подписке. Пример тут: https://habr.com/post/332628/

Answer 2

[Вячеслав Соболев]

Можно закрывать select при клике вне компонента, и при нажатии клавиши tab если в ваших компонентах она работает как переход между инпутами
https://www.npmjs.com/package/vue-click-outside