逻辑

Question

我在laravel 5.6中使用vuejs，并且已经用2个输入制作了搜索表单，但是我不确定如何在不同的页面中显示结果以及我的数据通过json返回。

逻辑

用户填充输入/输入->单击搜索按钮
用户重定向到其他页面->查看结果

代码

controller

public function indexsearch(Request $request)
    {

        $area = request('area');
        $keywords = request('keywords');

        if($keywords){
          $projects = Project::where('title', 'LIKE', "%{$keywords}%")
          ->orWhere('body', 'LIKE', "%{$keywords}%")
          ->orWhere('area', 'LIKE', "%{$keywords}%")
          ->get();
        }else{
          $projects = Project::where('title', 'LIKE', "%{$keywords}%")
          ->orWhere('body', 'LIKE', "%{$keywords}%")
          ->orWhere('area', 'LIKE', "%{$keywords}%")
          ->get();
        }

        return response()->json($projects);
    }

route

Route::get('indexsearch', 'Api\SearchController@indexsearch');

component

<template>
    <div>
      <div class="form-row justify-content-center align-items-center mmt-5">
        <div class="col-md-4">
          <label class="sr-only" for="inlineFormInput">Query</label>
          <input v-model.lazy="keywords" type="text" class="customformdes form-control mb-2" id="inlineFormInput" placeholder="E.g. Larave, Vue, Design, Writer">
        </div>
        <div class="col-md-4">
          <label class="sr-only" for="inlineFormInputGroup">Area</label>
          <input v-model.lazy="area" type="text" class="customformdes form-control mb-2" id="inlineFormInputGroup" placeholder="E.g. Jabodetabek, Medan, Surabaya">
        </div>
        <div class="col-md-2">
          <button type="button" class="customformdes btn btn-block btn-primary mb-2"><i class="fab fa-searchengin"></i> Search</button>
        </div>
      </div>
         // currently this part shows the result as hidden drop-down
        <b-list-group v-if="results.length > 0">
          <b-list-group-item v-for="result in results" :key="result.id" :to="`/projects/${result.slug}`">{{result.title}}</b-list-group-item>
        </b-list-group>


    </div>
</template>

<script>
var _ = require('lodash');
import navbar from './navbar.vue';
export default {
    data() {
        return {
            keywords: null,
            area: null,
            results: []
        };
    },

    watch: {
        keywords(after, before) {
            this.fetch();
        }
    },

    methods: {
        fetch() {
            axios.get('/api/indexsearch', { params: { keywords: this.keywords, area: this.area } })
                .then(response => this.results = response.data)
                .catch(error => {});
        }
    }
}
</script>

问题

根据我当前的控制代码，我无法单独获得第二个输入（区域），意思：：如果我不填写第一个输入而仅填写第二个输入，我将无法获得结果。
我不知道如何在其他页面中显示结果，而不是在同一页面中显示下拉菜单（在我的组件代码中注释了一部分）

谢谢。

Answer 1

对于第一个问题，您可以为area添加更多观察者：

（由于您只是从监视程序中调用单个method，因此您可以直接将方法的名称用作监视程序的值，因为它只是same。）< / strong>

watch: { keywords: 'fetch', area: 'fetch' },

您还可以使用$vm.watch同时监视多个值。

代替：

watch: { keywords(after, before) { this.fetch(); } },

您可以像这样：

mounted() { this.$watch( function() { return this.keywords + this.area }, (newVal, oldVal) => { this.fetch(); } ) }

对于第二期，您可以将props data传递到目标页面。

请参见下面的示例代码：

ResultsPage.vue：

<template> <div> <div v-for="result in results" :key="result.id">{{ result.title }}</div> </div> </template> <script> export default { props: ['results'] } </script>

路由器配置：

import ResultsPage from 'ResultsPage.vue' new Router({ routes: [ // ... some other routes in here { path: '/results', name: 'results', props: true, component: ResultsPage, } ] })

然后，您现在可以使用$router.push()导航到ResultsPage：

methods: { fetch() { axios.get('/api/indexsearch', { params: { keywords: this.keywords, area: this.area } }) .then(response => { this.$router.push({ name: 'results', params: { results: response.data } }) }) .catch(error => {}); } }

Answer 2

您需要添加set作为搜索词，才能解决第一个问题。

要在单独的页面上显示结果，您需要请求一条返回您的搜索方法中的视图的路线。

$area

如果您想在单独的页面上显示结果，那么您实际上不需要在这里显示提示。

您可以执行以下操作以在您的视图中提交表单：

// Controller

public function indexsearch(Request $request)
{

    $area = request('area');
    $keywords = request('keywords');

    if($keywords){
      $projects = Project::where('title', 'LIKE', "%{$keywords}%")
      ->orWhere('body', 'LIKE', "%{$keywords}%")
      ->orWhere('area', 'LIKE', "%{$area}%")
      ->get();
    }else{
      $projects = Project::where('title', 'LIKE', "%{$keywords}%")
      ->orWhere('body', 'LIKE', "%{$keywords}%")
      ->orWhere('area', 'LIKE', "%{$area}%")
      ->get();
    }

    return view('search_results', compact('projects'));
}

然后在搜索结果刀片中（search_results.blade.php）视图：

<form action="search"> <!-- or whatever your searchindex route is -->
  <div class="form-row justify-content-center align-items-center mmt-5">
    <div class="col-md-4">
      <label class="sr-only" for="inlineFormInput">Query</label>
      <input v-model.lazy="keywords" type="text" class="customformdes form-control mb-2" id="inlineFormInput" placeholder="E.g. Larave, Vue, Design, Writer">
    </div>
    <div class="col-md-4">
      <label class="sr-only" for="inlineFormInputGroup">Area</label>
      <input v-model.lazy="area" type="text" class="customformdes form-control mb-2" id="inlineFormInputGroup" placeholder="E.g. Jabodetabek, Medan, Surabaya">
    </div>
    <div class="col-md-2">
      <button type="button" class="customformdes btn btn-block btn-primary mb-2"><i class="fab fa-searchengin"></i> Search</button>
    </div>
  </div>
</form>

我希望这有助于解决您的问题。

Laravel第二页的搜索结果

逻辑

代码

问题

2 个答案: