如何使用路由器激活自动完成搜索栏 vue 上的点击事件 link

Question

我有一个 github 克隆的应用程序。我想让搜索栏像 github 一样工作。但是我在选项部分的导航栏上的搜索栏确实想要点击。我已经给选项一个事件，但仍然不起作用。这是我的代码

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>

Answer 1

v-model是vue的two-way绑定方式。它等于 v-bind:value 与 @input 的组合。我会删除 @input

<input
  :value="text"
  @input="event => text = event.target.value">

<input v-model="text">

然后你的搜索数据应该包括你的搜索栏的值，然后你必须触发 toRoute 方法。

如何使用路由器激活自动完成搜索栏 vue 上的点击事件 link

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

html

javascript

css

vue.js

bootstrap-4