Can anyone assist with a Vue.js app issue I'm facing? Currently, when the search input is empty, an error message appears - which is okay. However, I want to hide this error message as soon as the user starts typing in the search field. The code for my component includes both template and script sections:
<template>
<div class="jumbotron">
<h1 class="display-4">{{title}}</h1>
<p class="lead">{{intro}}</p>
<hr class="my-4">
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
</p>
<p v-for="(error, index ) in errors" :key="index">{{ error }}</p>
<input
class="form-control form-control-lg mb-3"
type="search"
placeholder="Search"
aria-label="Search"
v-model="search"
required
>
<div class="loading" v-if="loading"></div>
<table class="table table-sm table-light table-bordered" v-if="result.length">
<thead class="thead-dark">
<tr class="col-8">
<th scope="col">Name</th>
<th scope="col">Artist</th>
</tr>
</thead>
<tbody>
<tr v-for="(result, index) in result" :key="index">
<td>{{result.collectionName}}</td>
<td>{{result.artistName}}</td>
</tr>
</tbody>
</table>
<button
class="btn btn-success btn-lg btn-block mb-3"
type="submit"
v-on:click="getData"
v-if="result.length < 1"
>Get data</button>
</div>
</template>
<script>
export default {
name: "Hero",
props: {
navLink: String
},
data: function() {
return {
title: "Simple Search",
intro: "This is a simple hero unit, a simple jumbotron-style.",
subintro:
"It uses utility classes for typography and spacing to space content out.",
result: [],
errors: [],
search: "",
loading: ""
};
},
watch: {
search: function(val) {
if (!val) {
this.result = [];
}
}
},
methods: {
getData: function() {
this.loading = true;
fetch(`https://itunes.apple.com/search?term=${this.search}&entity=album`)
.then(response => response.json())
.then(data => {
this.result = data.results;
this.loading = false;
console.log(data);
});
if (this.search) return true;
this.errors = [];
if (!this.search) this.errors.push("Enter search field.");
}
}
};
</script>
I would appreciate any suggestions on whether I should modify the v-if statement or make changes within the script tag to achieve this requirement.