laravel - laravel vue 中的标签搜索
问题描述
我创建了一个搜索功能来根据所选标签显示相关项目,但我得到的结果值错误
到目前为止我所做的
- 创建控制器函数并以 json 格式返回结果
- 在其中创建路线
app.js
- 创建新组件以显示结果
- 提出 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>
问题
- 我的链接不像链接(当我将鼠标移到它上面时就像文本)
- 例如,如果我搜索区域
Jakarta
,我得到的大部分结果是他们的area
列所在的项目null
。
任何想法?
解决方案
对于链接部分,您在锚点上使用 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);
}
推荐阅读
- python - 集群时保留列表序列
- python - 为什么 Python 中会出现错误“模块 'googlesearch' 中没有名称 'search'”?
- kubernetes - Kubernetes pod 获得不同的 CPU 限制
- maven - 如何进行离线 Maven 构建?
- ios - 获取 FinishTransaction() 的 SKPaymentTransaction
- javascript - 显示多个选中复选框的值以及与它们关联的表单为 JSON 格式
- python - 如何在散景图中显示工具栏
- matlab - dx/dt = A*x 使用 Matlab ode23s
- c++ - 使用链接列表搜索哈希表的程序的问题
- python - 为什么while循环没有停止