如何使用Laravel灯塔php和vuejs实现搜索功能

Question

带有侦察和算法搜索的后端Laravel，Lighthouse php

下面是laravel grapeql:

products(search: String @search, orderBy: _ @orderBy(columns: ["created_at"])): [Product!]! @paginate

Graphql游乐场搜索工作完美：

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>

请提供建议。非常感谢。

Answer 1

最终解决了我的问题：

<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>