如何解决如何使用 Laravel lighthouse-php 和 vuejs 实现搜索功能?
带有 scout 和 algolia 搜索的后端 Laravel,Lighthouse-php
在laravel grapql下面:
products(search: String @search,orderBy: _ @orderBy(columns: ["created_at"])): [Product!]! @paginate
Graphql-playground 搜索完美运行:
products(first: 5,search: $searchText) {
data {
id
name
description
}
paginatorInfo {
currentPage
lastPage
}
}
}
Vue 模板需要建议如何使用搜索功能完成我的代码?:
<template>
<div class="py-16 px-16 text-gray-800">
<div>
Search
<input v-model="search" type="search" />
</div>
<div v-for="product in products" :key="product.slug">
?????
</div>
</div>
</template>
<script>
import ALL_PRODUCTS from '@/graphql/AllProducts.gql'
export default {
apollo: {
products: {
fetchPolicy: 'network-only',query: ALL_PRODUCTS,variables() {
return {
searchText: this.search,}
},skip() {
return !this.search
},},data() {
return {
search: '',}
},head: {
title: 'Products',}
</script>
请指教。谢谢!
解决方法
终于解决了我的问题:
<div class="py-16 px-16 text-gray-800">
<div>
Search
<input v-model="search" type="search" @input="searchResults()" />
</div>
<div v-if="products">
<div v-for="product in products.data" :key="product.slug">
<NuxtLink
:to="{ name: 'products-slug',params: { slug: product.slug } }"
>{{ product.name }}</NuxtLink
>
</div>
</div>
</div>
</template>
<script>
import ALL_PRODUCTS from '@/graphql/AllProducts.gql'
export default {
apollo: {
products: {
fetchPolicy: 'network-only',query: ALL_PRODUCTS,variables() {
return {
searchText: this.search,}
},skip() {
return !this.search
},},data() {
return {
search: '',}
},methods: {
searchResults() {
return this.products
},head: {
title: 'Products',}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。