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模型主要用于输入，选择和文本区域。所以

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

应该是

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

使用一个跨度和一个用于该跨度的类，然后在单击调用您的方法时，我不知道这是否是您的axios调用正确的变量，顺便说一句。可能是project.area.id或其他...

至于它看起来像一个链接，我假设您熟悉cursor:pointer CSS规则。

您的axios部件应如下所示：

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