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
    })

Here's the image:

The error says: Property 'filter' does not exist on type 'ComputedRef<Club[]>'.ts(2339)

CodePudding user response：

computed() returns a ref, so you need to unwrap the value through its .value property:

const filterOptions = computed(() => {