如何使用 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>