How to implement search functionality with Laravel lighthouse-php and vuejs? - php

Question

Backend Laravel with scout and algolia search, Lighthouse-php
Below laravel grapql:
products(search: String #search, orderBy: _ #orderBy(columns: ["created_at"])): [Product!]! #paginate
Graphql-playground search work perfectly:
products(first: 5, search: $searchText) {
data {
id
name
description
}
paginatorInfo {
currentPage
lastPage
}
}
}
Vue template need advice how to complete my code with search functionality?:
<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>
Please advice. Thank you!

Answer 1

Finally resolve my issue:
<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>