I have an app that is a github clone. I want to make search bar work like github. But my search bar on navbar on option section does want to click. I have give the option a event but still does not work. here my code
data() {
return {
search: "",
filteredrepo: [],
owner: "dimaswntech",
};
},
methods: {
toRoute() {
console.log("klilk", 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>v-model is the two-way binding method of vue.
Its equal to v-bind:value combined with @input.
I would remove the @input
<input
:value="text"
@input="event => text = event.target.value">
<input v-model="text">
Then you search data should include the value of your searchbar and you have to fire the toRoute method afterwards.