I have been developing a Single Page Application (SPA) using Vue 3, TypeScript, and The Movie Database (TMDB).
Currently, I am tackling the implementation of a search feature and I've encountered a bug.
The "search-box" component is located in src\components\TopBar.vue:
<template>
<form class="search_form w-100 mx-auto mt-2 mt-md-0">
<div class="input-group">
<input v-on:keyup="debounceMovieSearch" v-model="searchTerm" class="form-control search-box" type="text" placeholder="Search movies...">
<div class="input-group-append">
<button class="btn" type="button">
<font-awesome-icon :icon="['fas', 'search']" />
</button>
</div>
</div>
<div v-if="isSearch" @click="isSearch = false" class="search-results shadow-sm">
<div v-if="this.movies.length">
<router-link v-for="movie in movies.slice(0, 10)" :key="movie.id" :to="`/movie/${movie.id}`">
<SearchItem :movie="movie" />
</router-link>
</div>
<div v-else>
<p class="m-0 p-2 text-center">No movies found for this search</p>
</div>
</div>
</form>
</template>
.
.
.
Stackblitz Preview
You can take a look at the interactive demo on Stackblitz.
. . [Your problem statement goes here] . .Inquiries
- Can you identify any mistakes in my code implementation?
- How would you suggest resolving this issue effectively?