Поиск useFuse или Fuse.js как с ним работать?

Question

[Lahma]

Здравствуйте. Не пойму как работает поиск useFuse и Fuse.js?!
===
Пример из источник - https://vueuse.org/integrations/useFuse/#install-f...

const data = [
'John Smith',
'John Doe',
'Jane Doe',
'Phillip Green',
'Peter Brown',
]
const input = ref('Jhon D')
const { results } = useFuse(input, data)

/*
* Results:
*
* { "item": "John Doe", "index": 1 }
* { "item": "John Smith", "index": 0 }
* { "item": "Jane Doe", "index": 2 }
*
*/
===
Ок, с массивом строк работает! Как только я подтягиваю данные из - https://fakestoreapi.com/products больше ничего не работает, пустой массив.

Пробую подключить Fuse.js на прямую.
===
const options = {
includeScore: true,
// Search in `author` and in `tags` array
keys: ['author', 'tags']
}

const fuse = new Fuse(list, options)

const result = fuse.search('tion')
===
Тоже пустой массив... Ничего не понял.

Мой код

<script setup lang='ts'>
import { ref, watch } from 'vue'
import Fuse from 'fuse.js'
import apiService from '@/services/apiService'

type DataItem = {
  id: number
  title: string
  price: number
  description: string
  category: string
  image: string
  rating: {}
}

const input = ref('')
const loading = ref(false)
const data = ref<DataItem []>([])

const options = {
  includeScope: true,
  keys: ['title']
}

const fuse = new Fuse(data.value, options)

const results = fuse.search(input.value)

console.log('results:', results)

const getProducts = async () => {
  try {
    loading.value = true
    const response = await apiService.getProducts()
    data.value = response.data
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

watch(input, () => {
  if (input.value.length > 1) {
    getProducts()
  } else {
    data.value = []
  }
})
</script>

Answer 1

[iljaGolubev]

У вас бардак в алгоритме поэтому с `new Fuse` (скорее всего и с useFuse) работает, но не так как вы ожидали.
Пустой массив это логичный вывод console.log('results:', results) в этот момент
потому что getProducts() вы вызываетe после изменений в input

Рабочий кусок с useFuse

import { useFuse } from '@vueuse/integrations/useFuse';
const data = ref([]);
const input = ref('')
const found = ref();
fetch('https://fakestoreapi.com/products').then(r => r.json()).then(j => {data.value = j}) 
const { results } = useFuse(input, data, { matchAllWhenSearchEmpty:false, fuseOptions: { includeScore: true, keys: ['title'] } })
/*<template>
    {{ results }}
</template>*/

Comments

[Lahma]

Спасибо iljaGolubev
Да все заработало ))) буду внимательнее