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

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