CODEWITHSUNDEEP
javascriptfirebasevue.jsgoogle-cloud-firestore
Joseph
Joseph

Reputation: 873

Use variable in Firestore limit

I'd like to be able to use a variable (page) in the limit condition in Firebase Firstore. I'm using Vue:

export default {
  data() {
    return {
      page: 1,
    }
  },
  methods: {
  },
  firestore: {
    Words: db.collection("Words").where("incomplete", "==", true).limit(this.page)
  },
}

This does not work. I get this error:

Cannot read property 'page' of undefined

I've tried firebase.page, also simply page, I can't work out how to use that variable in this way. Does anyone know how?

Upvotes: 0

Views: 57

Answers (2)

l1b3rty
l1b3rty

Reputation: 3650

Your issue has nothing to do with Firestore but with the fact that this is not accessible within your custom $option firestore.

Try this:

methods: {
  firestore() {
    return db.collection("Words").where("incomplete", "==", true).limit(this.page).get()
  }
},

And note that this will return a Promise that you will have to handle accordingly

Upvotes: 1

danh
danh

Reputation: 62676

The issue relates to the definition of "this" outside the context of a function. I don't use vuefire, but it looks like from the docs that the firestore prop may also be defined as a function, analogous to data(). Providing a functional context for this...

data() {
  return {
    Words: [],
    page: 1,
  }
},
methods: {
},
firestore() {
  return {
    Words: db.collection("Words").where("incomplete", "==", true).limit(this.page),
  }
},

Also note (another learning from perusing vuefire docs), that in order to get Words bound to the instance, the property must appear in both the data() and firestore() functions.

Upvotes: 1

Related Questions