how to activated click event on autocomplete search bar vue with router link-CodePudding

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
              
              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"  type="submit"
              >Search</b-button
            > -->
          </b-nav-form>

CodePudding user response：

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.