How to close select correctly?

Question

Vue.js

How to properly close an open select when opening another?

<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

you can make a common event bus for all selects, subscribe to the discovery and set the state in the subscription. An example is here: https://habr.com/post/332628/

Answer 2

You can close select when clicking outside the component, and when pressing the tab key if it works as a transition between inputs in your components
https://www.npmjs.com/package/vue-click-outside