Filter records with infinite scrolling

[l0n3s0m3-w0lf13]

Hewo, I just completed the Infinite Scrolling in Inertia course from Laracast and at the end of it, it doesn't contemplate the implementation of filters.

On the back-end (with Laravel) side everything is done and functional as usual, but I'm very lost on how to make it work on the front-end using Vue and Inertia.

I've tried so many things, like watchers, hooks, reset the items... but by default it only works if the page is reloaded completely and not dynamically by typing. I understand that this may be because the ref items are not updated when refetching, but I don't know how I could do it either.

The files are as follows:

// Index.vue

<script setup>
import { ref, watch } from 'vue'
import ListItem from '@/Components/ListItem.vue'
import Filters from '@/Components/Filters.vue'
import { useInfiniteScroll } from '../../Composables/useInfiniteScroll'
import { pickBy, debounce } from 'lodash'
import { router } from '@inertiajs/vue3'

const props = defineProps({
  recipes: {
    type: Object,
    default() {
      return {}
    },
  },
  filters: {
    type: Object,
    default: null,
  },
})

const params = ref({
  filters: {
    search: props.filters.search,
  },
})

const landmark = ref(null)

let { items, canLoadMoreItems } = useInfiniteScroll('recipes', landmark)

let refetch = debounce(function () {
  router.get('/recipes', pickBy({ ...params.value.filters }), {
    replace: true,
    preserveState: true,
  })
}, 200)

watch(params, () => refetch(), { deep: true })
</script>

<template>
<!-- ... -->
  <section class="hidden 2xl:block 2xl:w-full">
    <Filters v-model="params.filters.search" />
  </section>
  <ListItem
    v-for="recipe in items" />
<!-- ... -->
</template>

// useInfiniteScroll.vue composable

import { computed, ref } from 'vue'
import { router, usePage } from '@inertiajs/vue3'
import { useIntersect } from '@/Composables/useIntersect'

export function useInfiniteScroll(propName, landmark = null) {
  const value = () => usePage().props[propName]

  const items = ref(value().data)

  const initialUrl = usePage().url

  const canLoadMoreItems = computed(() => value().next_page_url !== null)

  const loadMoreItems = () => {
    if (!canLoadMoreItems.value) {
      return
    }

    router.get(
      value().next_page_url,
      {},
      {
        preserveState: true,
        preserveScroll: true,
        onSuccess: () => {
          window.history.replaceState({}, '', initialUrl)
          items.value = [...items.value, ...value().data]
        },
      },
    )
  }

  if (landmark !== null) {
    useIntersect(landmark, loadMoreItems, {
      rootMargin: '0px 0px 150px 0px',
    })
  }

  return {
    items,
    loadMoreItems,
    resetItems: () => (items.value = value().data),
    canLoadMoreItems,
  }
}

I would appreciate any help, ty :heart_decoration:!

[dodecasphere]

Just came across your question, and even though it's a few months old, I think this will help. The videos page demoed on the series incorporates what i think you're looking for. Check it out here:

https://github.com/laracasts/infinite_scrolling_in_inertia_js/blob/episode_4/resources/js/Pages/Videos.vue