CODEWITHSUNDEEP
vue.jsvue-composition-api
Posoroko
Posoroko

Reputation: 281

typeError object(...) is not a function

I get the "object is not a function" error on the line where the "setup()" function appears. I have no clue how to debug this... Am I doing something wrong? (I'm not an experimented developer, so I know I'm doing things wrong, but here, I have no clue what it is...)

It's asking me to add more details because my post is mainly code... So I'm writing this, but I habe idea what details I could c=possibly add. :-)

Thanks in advance for your help!!

<script>
  import { ref } from 'vue' 
  import Ftable from '@/components/tables/Ftable.vue'
  import Searchbar from '@/components/tables/Searchbar.vue'
  import getMainCollection from '@/composables/getMainCollection'
  
export default {
    name: 'Home',
    components: { Searchbar, Ftable },
    
    setup(){    //error arrives on this line

      const { getData, getMore } = getMainCollection()
      const documents = ref('')
      const lastVisible = ref('')
      const type = ref('')
      const country = ref('')

      function newSearch() {
        const {doc, last} = getData(type, country)
        documents.value = doc
        lastVisible.Value = last
      }

      function askForMore() {
        const { doc, last } = getMore(type, country, lastVisible)
        documents.value = doc
        lastVisible.value = last
      }
      
      

        return { documents, askForMore, newSearch, askForMore }

    }

}
</script>

import { ref } from 'vue'
import { projectFirestore } from '@/firebase/config'

const getMainCollection = () => {

const collectionGroupRef = projectFirestore.collectionGroup('users')
const lastVisible = ref('')
const documents = ('')

function getData(type, country) {
    const filter = null
    if (type != null && country == null){
        filter = collectionGroupRef.where('type', '==', `${type}`)
    }
    else if(type == null && country != null){
        filter = collectionGroupRef.where('country', '==', `${country}`)
    }
    else{
        filter = collectionGroupRef
    }

    const data = filter.orderBy('createdAt')
    .limit(2)
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            documents.value.push({ ...doc.data(), id: doc.id})
        })

    lastVisible = querySnapshot.docs[querySnapshot.docs.length-1]

    })
    return( documents, lastVisible)
}

function getMore(type, country, lastVisible) {
    const filter = null
    if (type != null && country == null){
        filter = collectionGroupRef.where('type', '==', `${type}`)
    }
    else if(type == null && country != null){
        filter = collectionGroupRef.where('country', '==', `${country}`)
    }
    else{
        filter = collectionGroupRef
    }
    filter.startAfter(lastVisible)
    .limit(2)
    .orderBy(createdAt)
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            documents.value.push({ ...doc.data(), id: doc.id })
        })
    lastVisible = querySnapshot.docs[querySnapshot.docs.length-1]
    })
    return( documents, lastVisible)
}

return ( getData, getMore )
}

export { getMainCollection }

Upvotes: 0

Views: 3812

Answers (1)

akuiper
akuiper

Reputation: 215127

Since you exported getMainCollection as an object:

export { getMainConnection }

You need to destructure it when importing:

import { getMainCollection } from '@/composables/getMainCollection'

Upvotes: 1

Related Questions