Vuejs useFuse taking data but not filtering

84 views Asked by At

I have been trying to find out what is happening but can't seem to get this to work. I did exactly what the documentation says but for some reason, it just doesn't give me any results. I hope you guys can help me out.

This is the JSON data

[
  {
    "ID": 1,
    "name": "Hardwell"
  },
  {
    "ID": 2,
    "name": "Martin Garix"
  },
  {
    "ID": 3,
    "name": "Armin van Buuren"
  },
  {
    "ID": 4,
    "name": "Ferry Corsten"
  },
  {
    "ID": 5,
    "name": "Artisan"
  },
  {
    "ID": 6,
    "name": "Markus Schulz"
  }
]

Here is my store that takes this in (I work with pinia):

import {defineStore} from "pinia";
import {computed, ref} from "vue";

import ArtistData from "@/assets/ArtistData.json"

export const useArtistDataStore = defineStore('ArtistDataStore', () => {

    const artistCollection = ref(ArtistData)
...
...

And here is the relevant code in the component where I want to filter.

import {useFuse} from "@vueuse/integrations/useFuse";
import {useArtistDataStore} from "@/stores/ArtistDataStore";

const artistCollection = ref(useArtistDataStore().artistCollection)

const options = computed(() => ({
  fuseOptions: {
    minMatchCharLength: 3,
    includeScore: true,
    keys: ['name'],
    threshold:1.0,
  },
  resultLimit: 100,
  matchAllWhenSearchEmpty: true,
}))
const { result } = useFuse(artistName.value, artistCollection.value, options)

When I run this 'result' stays undefined no matter what I enter. When I check the contents of the result, the object is like this:

const result = useFuse(artistName.value, artistCollection.value, options) //Note the missing curly braces

I can see that the 'result.fuse._docs' is an array of 6 objects. Checking the content of the array, it is the correct data from the JSON. It just doesn't want to filter.

Am I doing something wrong? Must be.

I installed the fuse with npm i @vueuse/core. Also installed it with npm install fuse.js. Tried both ways but none seem to work.

I also tried to remove all code and copy & paste the demos I could find but even that seems to not do anything.

Though I am relatively new to Vuejs I do know the basics. Thinking I must be doing something wrong here.

0

There are 0 answers