const app = new Vue({
el: "#app",
name: 'aselect',
data: {
value: 'Select a Fruit',
list: ["Orange", "Apple", "Kiwi", "Lemon", "Pineapple"],
visible: false
},
methods: {
toggle() {
this.visible = !this.visible;
},
select(option) {
this.value = option;
}
}
})<div id="app">
<h1>Custom Select Dropdown</h1>
<div class="aselect" :data-value="value" :data-list="list">
<div class="selector" @click="toggle()">
<div class="label">
<span>{{ value }}</span>
</div>
<div class="arrow" :class="{ expanded : visible }"></div>
<div :class="{ hidden : !visible, visible }">
<ul>
<li :class="{ current : item === value }" v-for="item in list" @click="select(item)">{{ item }}</li>
</ul>
</div>
</div>
</div>
</div>I found the solution I was looking for on https://www.npmjs.com/package/vue-click-outside
You can check out my implementation on CodePen here https://codepen.io/santoshch/pen/gOmvvmN. In this dropdown example, I faced an issue where the dropdown list wouldn't close after toggling down.
To fix this issue, I explored options within Vue.js and came across a useful npm package called vue-click-outside. I attempted to incorporate this event listener into my code but needed guidance on how to proceed further with its usage.