Nuxt3 and VueUse refDebounced and min 3 chars then trigger useFetch

52 Views Asked by At

Want to trigger useFetch after min 3 chars and also wait for 100 mS after each char.

Have also a strange thing that the value of searchTerm.value is always empty.

const searchTerm = ref('')

const debouncedFn = useDebounceFn(() => {
    if (searchTerm.value && searchTerm.value.length >= 3) {
      execute()
    }
  }, {delay: 50})

const {data, execute } = await useFetch('url', {
    headers: {
      access_token: 'token'
    },
    query: {
      query: **searchTerm.value** >> always be empty
    }
    watch: [
      debouncedFn
    ],
    immediate: false,
  })

<template>
    <input v-model="searchTerm">
</template>
0

There are 0 best solutions below