My search function is operational, but it currently requires the user to press the enter key to display results. I am interested in adding a button option for users as well. Users should be able to find results by either pressing enter or clicking the button. Can someone assist me with this?
<div class="search-box">
<input
type="text"
class="search-bar"
placeholder="Search..."
v-model="query"
@keypress="fetchWeather"
/>
<button>Click Me!</button>
</div>
methods: {
fetchWeather (e) {
if (e.key == "Enter") {
fetch(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
.then(res => {
return res.json();
}).then(this.setResults);
}
},
setResults (results) {
this.weather = results;
}