Всем привет... вот сделал поиск на сайте, но вот как сделать пару условий типа: если поле ввода пустое, то div.search__dropdown исчезает(ну это легко); вот если ввести данные в поле, то в массив searchArr сразу записываются ответ сервера, а как к примеру сделать так: пользователь вводит в поле какое-то слово, ему выводится данные и когда он или стирает слово из поля или ему поле поиска больше не нужно( типа уводит курсор мыши), то чистить этот массив
Вот как он сейчас выглядит:
<template>
<header class="uk-box-shadow-large uk-background-muted header">
<div class="uk-container">
<nav uk-navbar>
<div class="uk-navbar-left">
<router-link :to="{name:'home'}"><img src="" alt=""></router-link>
</div>
<div class="uk-navbar-right">
<div class="search">
<input class="search__input" type="text" v-model="keywords" placeholder="Поиск...">
<button class="search__button" type="submit"><span uk-icon="icon:search"></span></button>
</div>
<div class="search__dropdown">
<ul class="uk-list">
<li v-for="rec in searchArr" :key="rec.id" v-text="rec.name"></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<script>
import axios from 'axios';
export default {
data: function(){
return{
keywords: '',
searchArr:[]
}
},
watch: {
keywords(after, before) {
this.FetchData();
}
},
methods: {
FetchData(){
axios.get('/api/search', { params: { keywords: this.keywords } })
.then(res =>{
this.searchArr = res.data
})
.catch(err =>{
});
}
}
}
</script>