Результаты поиска Laravel на второй странице

Question

Я работаю с vuejs в laravel 5.6, и я создал форму поиска с 2 входами, но я не уверен, как показать результаты на другой странице и мои данные возвращаются с помощью json.

Logic

1. Пользователь заполняет вводы / вводы -> нажимает кнопку поиска
2. Пользователь перенаправляет на другую страницу -> посмотреть результаты

код

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>

Вопросы

1. По моему текущему контрольному коду я не могу получить только свой второй вход (область), означает: Если я не заполняю первый ввод и просто заполняю второй ввод, я не могу получить результаты.
2. Я не знаю, как показать результаты на другой странице, а не как раскрывающийся список на той же странице (часть прокомментирована в коде моего компонента)

Заранее спасибо.

Answer 1

Для вашего первого выпуска вы можете добавить больше наблюдателя для area:

(Поскольку вы просто вызываете один method из своего наблюдателя, вы можете просто напрямую использовать имя метода в качестве значения вашего наблюдателя, поскольку это просто то же самое .)

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();
    }
  )

}

---

Что касается второго выпуска, вы можете передать реквизиты данных на целевую страницу.

См. Пример кода ниже:

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,
    }
]

})

, теперь вы можете перейти к ResultsPage, используя $router.push():

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

Вам нужно будет добавить $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'));
}

Если вы хотите показать результаты на отдельной странице, то вам не нужно здесь vue.

Вы можете сделать что-то вроде этого, чтобы отправить форму на ваш взгляд:

<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>

Затем в блейде результатов поиска (search_results.blade.php):

<div>
    <b-list-group">
        @foreach($projects as $project)
        <b-list-group-item>{{ $project->title }}</b-list-group-item>
        @endforeach
    </b-list-group>
</div>

Надеюсь, это поможет решить вашу проблему.