To be honest I'm quite new with all these three technologies, vue, gql and typeScript, anyway the problem it's pretty simple. I'm using useQuery to fetch data and a computed prop to access the result. I want to filter the 'clubs' based on their 'locationId' before returning to the el but I just can't, trying things i created an interface which might be not a good option, here's the code:
const { result } = useQuery(
gql`
query getClubAndLocations {
getLocations {
_id
name
}
getClubs {
_id
name
locationID
}
}
`
)
interface Club {
_id: string
name: string
locationID: string
}
const clubOptions = computed<Club[]>(() => result.value?.getClubs ?? [])
const filterOptions = computed(() => {
return clubOptions.filter
})
The error says: Property 'filter' does not exist on type 'ComputedRef<Club[]>'.ts(2339)
computed()
returns a ref
, so you need to unwrap the value through its .value
property:
const filterOptions = computed(() => {
👇
return clubOptions.value.filter
})