Поиск тегов в laravel vue

Question

Я сделал функцию поиска, чтобы показать связанные проекты на основе выбранного тега, и я получаю результаты с неправильными значениями

Что я сделал до сих пор

1. Создать функцию контроллера и вернуть результаты в виде json
2. Создать маршрут в app.js
3. Создать новый компонент для отображения результатов
4. сделал axios запрос на отправку данных на контроллер и перенаправление на новый компонент для получения результатов

код

controller

public function areas(Request $request){
        $areas = Project::where('area', $request->area)->where('published', '=', 'y')->get();
        return response()->json($areas, 200);
    }

route in api.php

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

route in app.js

import AreasPage from './components/areassearch.vue'
{
  path: '/areas',
  name: 'areas',
  props: true,
  component: AreasPage,
},

search script + component link

// link

<a v-model.lazy="area" @click="areasearch">{{project.area}}</a>

//script

methods: {
        //search in areas
        areasearch() {
            axios.get('/api/areasearch', {
                params: {
                  area: this.area
                }
              })
              .then(response => {

                this.$router.push({
                  name: 'areas',
                  params: {
                    areas: response.data
                  }
                })

              })
              .catch(error => {});
        },
    },

results component

<template>
  <div>
    <navbar></navbar>

    <template v-if="areas.length > 0">
    <div class="container-fluid counters">
        <div class="row text-center">
            <div v-for="area in areas" :key="area.id" :to="`/projects/${area.slug}`">
                <li>{{area.title}}</li>
            </div>
        </div>
    </div>
    </template>
    <template v-else>
        <p>Sorry there is no area for you, try search new query.</p>
    </template>

    <footerss></footerss>
  </div>
</template>
<script>
    import navbar from './navbar.vue';
    import footerss from './footer.vue';
  export default {
    props: ['areas'],
    components: {
        navbar,
        footerss
    },
  }
</script>

Выпуск

1. Моя ссылка не ведет себя как ссылка (похожа на текст, когда я наводю на нее мышь)
2. Например, если я ищу область Jakarta, большинство результатов, которые я получаю, это проекты, столбец которых area равен null.

Есть идеи?

Answer 1

Для части ссылки вы используете v-модель на якорях, v-модель в основном для входов, select, textareas. Так

<a v-model.lazy="area" @click="areasearch">{{project.area}}</a>

Должно быть

<span class="my-link" @click="areasearch(project.area)">{{project.area}}</span>

Используйте span и класс для этого промежутка, а затем нажмите на вызове вашего метода, я не знаю, правильная ли это переменная для вашего вызова axios, кстати. это может быть project.area.id или что-то еще ...

Что касается ссылки, я предполагаю, что вы знакомы с cursor:pointer правилом CSS.

Ваша аксиальная часть должна выглядеть примерно так:

areasearch(thearea) {
    axios.get('/api/areasearch', {
        params: {
            area: thearea
        }
    })
    .then(response => {

        this.$router.push({
            name: 'areas',
            params: {
                areas: response.data
            }
        })

    })
    .catch(error => {});
},

Что касается контроллера:

public function areas(Request $request){

    $auxAreas = explode("+", $request->area);

    $areas = Project::whereNotNull('area')
        ->whereIn('area', $auxAreas)
        ->where('published', '=', 'y')
        ->get();
    return response()->json($areas, 200);
}

Answer 2

сначала для неправильного результата, попробуйте это:

public function areas(Request $request){
 $areas = Project::whereNotNull('area')
 ->where([
    ['area', $request->area],
    ['published', '=', 'y']
 ])->get();
 return response()->json($areas, 200);
}