我使用Laravel5.6作为后端的api，使用vuejs作为前端spa应用程序。和https://github.com/nicolaslopezj/searchable搜索包，在我以前使用刀片模板引擎的项目中运行良好。

我是vuejs的新手，我正在学习如何做事，我陷入了一个困惑的境地，我不知道如何在前端使用laravel搜索。

我以前在其他项目中使用blade作为前端时所做的工作

在我的控制器中

public function index(Request $request)
    {
        $start_search = microtime('s');
        $searchterm = $request->input('search');
        if($request->has('search')){
           $results =  Web::search($searchterm)->paginate(10);
         } else {
          $results =  Web::latest()->paginate(10);
         }
        $stop_search = microtime('s');
        $time_search = ($stop_search - $start_search);
        return view('search.index', compact('results', 'searchterm', 'time_search'));
    }

在我看来

<small>{{$results->total()}} results found for "<em class="b-b b-warning">{{$searchterm}}</em>" in {{$time_search}} seconds</small>
@forelse ($results as $result)
        <div class="mb-3">
          <a href="{{ url($result->url) }}" class="text-primary clear h-1x">{{$result->meta_title}} <span class="badge badge-pill primary">{{$result->rank}}</span></a>
          <span class="text-success clear h-1x">{{$result->url}}</span>
          <span class="h-2x">{{$result->meta_description}}</span>
        </div>
      @empty
        No Results Found
      @endforelse
      <div class="pt-2 pagination-sm">
          {{ $results->links('vendor.pagination.bootstrap-4') }}
      </div>

这个代码工作得很好，我能够搜索和显示结果正确随着搜索时间。

现在我想对LaravelAPI和vuejs前端做同样的事情。这就是我试过的

public function index(Request $request)
        {
            $start_search = microtime('s');
            $searchterm = $request->input('search');
            if($request->has('search')){
               $results =  Web::search($searchterm)->paginate(10);
             } else {
              $results =  Web::latest()->paginate(10);
             }
            $stop_search = microtime('s');
            $time_search = ($stop_search - $start_search);
            return WebResource::collection($results);
        }

我为它创建了一个集合资源。

问题1。我的问题与控制器代码有关，如何返回$searchterm和$time_search，以便在前端使用它们。

在我的vue组件中，我一直在努力学习

<template>
other code..
<div class="mb-3" v-for="result in results" :key="result.results">
  <router-link :to="result.url" class="text-primary clear h-1x"> {{ result.meta_title }} </router-link>
  <span class="h-2x">{{ result.meta_description }}</span>
</div>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'

export default {
  layout: 'main',

  computed: mapGetters({
      locale: 'lang/locale',
      authenticated: 'auth/check'
  }),

  metaInfo () {
    return { title: this.$t('searchpagetitle') }
  },

  data: function () {
    return {
        results: [],
        title: window.config.appName
    }
  },

  watch: {
    locale: function (newLocale, oldLocale) {
      this.getResults()
    }
  },

  mounted() {
      console.log(this.locale)
      this.getResults ()
  },

  methods: {
    getResults() {
      var app = this;
      axios.get('/api/web')
        .then(response => {
          // JSON responses are automatically parsed.
          this.results = response.data.data
        })
        .catch(e => {
          this.errors.push(e)
        })
    }
  }
}
</script>

问题2：我的第二个问题与vuejs有关，如何创建搜索表单并根据搜索结果呈现结果，以及以正确的搜索url结尾？searchterm=在我的案例中搜索关键字。

当我使用blade时，我使用了带有动作url的普通html表单，以便它呈现结果。我还使用$searchterm使用相同的搜索词搜索其他路线，如图像、视频。我只是在href中使用了{url（'/images？searchterm='.$searchterm）}}，这样当用户单击它时，它会像谷歌一样呈现具有相同关键字的所有图像的结果。并且还使用占位符作为“输入搜索”和值作为“{{$searchterm}}”，这样搜索词也会保留在搜索表单中。

我想知道如何在vuejs中做同样的事情。

非常感谢。