I'm working on an app that is similar to Github, and I want to create a search bar functionality just like Github's. However, I'm facing an issue with my search bar located in the navbar option section as it doesn't seem to register any clicks. I have added an event to the option but still, it doesn't work. Here's a snippet of my code:
data() {
return {
search: "",
filteredrepo: [],
owner: "dimaswntech",
};
},
methods: {
toRoute() {
console.log("clicked", this.search);
this.$router.push({ path: "/detail/" + this.search });
},<b-nav-form>
<input
class="form-control input-repo"
type="text"
v-model="search"
@input="searchData"
autocomplete="off"
list="my-list-id"
placeholder="Search repo"
/>
<datalist id="my-list-id" v-if="filteredrepo" @change="toRoute">
<option v-for="filterre in filteredrepo" :key="filterre.id">
{{ filterre.name }}
</option>
</datalist>
<!-- <b-button size="sm" class="my-2 my-sm-0" type="submit"
>Search</b-button
> -->
</b-nav-form>