使用VueJS和Laravel的实时搜索引擎

我在VueJS和Laravel中做搜索引擎部分，但我有一个问题，不允许我在其他部分中前进。搜索引擎打开，但当我写作时，它只发送第一个字母或第二个字母，但并非所有字母都像下图所示：

之后，它在控制台中显示以下错误：

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/search?q=th"

现在显示我的搜索引擎代码：

<template>
  <div class="form_MCycW">
    <form autocomplete="off" @sumbit.prevent>
      <label class="visuallyhidden" for="search">Search</label>

      <div class="field_2KO5E">
        <input id="search" ref="input" v-model.trim="query" name="search" type="text" placeholder="Search for a movie, tv show or person..." @keyup="goToRoute" @blur="unFocus">

        <button v-if="showButton" type="button" aria-label="Close" @click="goBack">
          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"/></g></svg>
        </button>
      </div>
    </form>
  </div>
</template>

<script>
  import { mapState } from 'vuex';

  export default {
    data() {
      return {
        query: this.$route.query.q ? this.$route.query.q : ''
      }
    },

    computed: {
       showButton() {
           return this.$route.name === 'search';
       },

       ...mapState({
         search: state => state.event.fromPage
       })
     },

     mounted() {
       this.$refs.input.focus();
     },

     methods: {
       goToRoute() {
         if (this.query) {
           this.$router.push({
             name: 'search',
             query: { q: this.query },
           });
         } else {
           this.$router.push({
             path: this.fromPage,
           });
         }
       },

       goBack() {
         this.query = '';

         this.$router.push({
           path: '/',
         });
       },

       unFocus (e) {
         if (this.$route.name !== 'search') {
           const target = e.relatedTarget;

           if (!target || !target.classList.contains('search-toggle')) {
             this.query = '';
             this.$store.commit('closeSearch');
           } 
         }
       }
     }
   }
</script>

它应该是一个实时搜索引擎。如果您能帮我解决这个问题，我将不胜感激。…

您需要的是一份工作。它所做的是等待或延迟，直到用户在模型更新之前或在您将其发送到服务器之前完成输入

它如何工作的一个例子是

这是一个包裹。

---

我很感激你能帮我解答这个问题，但当我看到这个问题时，你的回答并没有帮我解答我的问题。它是从搜索引擎发布的，但不是实时发布的。如何避免这种情况，朋友？如果你

goToRoute（）

运行它，那么它将实时加载数据？应该是这样的。这是否回答了你的问题？

<template>
  <main class="main">
    <div class="listing">
      <div class="listing__head"><h2 class="listing__title">{{ title }}</h2></div>
      <div class="listing__items">
        <div class="card" v-for="(item, index) in data.data" :key="index">
          <router-link :to="{ name: 'show-serie', params: { id: item.id }}" class="card__link">
            <div class="card__img lazyloaded"><img class="lazyload image_183rJ" :src="'/_assets/img/covers/posters/' + item.poster" :alt="item.name"></div>
            <h2 class="card__name">{{ item.name }}</h2>
            <div class="card__rating">
              <div class="card__stars"><div :style="{width: item.rate * 10 + '%'}"></div></div>
              <div class="card__vote">{{ item.rate }}</div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
  import { mapState } from 'vuex';
  let fromPage = '/';

  export default {
    name: "search",

    metaInfo: {
       bodyAttrs: {
        class: 'page page-search'
       }
    },

    computed: {
      ...mapState({
        data: state => state.search.data,
        loading: state => state.search.loading
      }),

      query() {
        return this.$route.query.q ? this.$route.query.q : '';
      },

      title() {
        return this.query ? `Results For: ${this.query}` : '';
      },
    },

    async asyncData ({ query, error, redirect }) {
      try {
        if (query.q) {
          this.$store.dispatch("GET_SEARCH_LIST", query.q);
        } else {
          redirect('/');
        }
      } catch {
         error({ message: 'Page not found' });
      }
    },

    mounted () {
      this.$store.commit('openSearch');
      this.$store.commit('setFromPage', fromPage);

      if (this.data.length == 0 || this.data === null) {
        this.$store.dispatch("GET_SEARCH_LIST", this.query);
      }
      setTimeout(() => {
          this.showSlideUpAnimation = true;
      }, 100);
    },

    beforeRouteEnter (to, from, next) {
      fromPage = from.path;
      next();
    },

    beforeRouteUpdate (to, from, next) {
      next();
    },

    beforeRouteLeave (to, from, next) {
      const search = document.getElementById('search');

      next();

      if (search && search.value.length) {
        this.$store.commit('closeSearch');
      }
    }
  };
</script>

{
  name: 'search',
  path: '/search',
  component: require('../views/' + themeName + '/control/search/index').default
}