https://codepen.io/n_ds/pen/VOxVrE Не работает selectItem(), связано это как-то с onBlur(), но не могу понять как решить
<div class="m-select">
<div class="m-select__search">
<span class="search__dropdown-ico">
<i class="fa fa-sort-desc"></i>
</span>
<input type="text"
name=""
placeholder="город"
@focus="onFocus()"
@blur="onBlur()">
</div>
<div v-if="isVisibleDropdown" class="m-select__dropdown-list">
<ul>
<li v-for="city in cities">
<span @click="selectItem(city.name)">
{{ city.name }}
</span>
</li>
</ul>
</div>
</div>
export default {
data() {
return {
isVisibleDropdown: true,
cities: [
{
name: 'Москва'
},
{
name: 'Самара'
},
{
name: 'Казань'
}
]
}
},
methods: {
onFocus() {
this.isVisibleDropdown = true
},
onBlur() {
this.isVisibleDropdown = false
},
selectItem(name) {
alert(name)
}
}
}