Populate q-select from Database (indexedDB/localbase)
-
I need to create a drop-down menu that gets its list of items from the database. I’m using localbase to work with indexedDB
<q-select v-model="model" bg-color="grey-3" :options="options" label="Dog Owner" hint="Owner - must exist as a person" />
I am assuming that I need to put the call to the method under the “options” but I don’t know what the syntax is supposed to be. This doesn’t work.
return { model: null, options: [ { value: getpeople(l_name) } ] }
getpeople() { db.collection('people') .orderBy('l_name') .get() .then(people => { this.people = people }) }
Thanks for any help in advance. I’ve been googling for a couple of days and not finding a solution. I have read over the Quasar documentation for the q-select but it doesn’t seem to show anything that can help.
-
@cynderkromi Just use the promises there. If you re-form your getPeople() method into promise-returning, that should do the trick.
e.g.
getpeople() { return new Promise((resolve) => { db.collection('people') .orderBy('l_name') .get() .then((people) => { resolve(people) }) }) }
in data()
return { model: null, options: [] }
in methods and mounted() (or anywhere you are OK to fill your options array)
methods: { async fillOptions () { this.options = await getPeople() } }, mounted () { this.fillOptions() }
-
This post is deleted!
-
okay… figured this out. Thanks for the help @Ilia
This is what worked, for future reference:
<div class="col-4 q-pa-sm"> <q-badge color="secondary" multi-line> Model: "{{ Peepsmodel }}" </q-badge> <q-select v-model="Peepsmodel" bg-color="grey-3" :options="options" label="Dog Owner" hint="Owner - must exist as a person" /> </div>
mounted () { this.getpeople() console.log(" Mounted: this - ", this) },
addNewDog() { if (this.callName !== null && this.regName !== null) { this.$q.notify({ color: 'green-4', textColor: 'white', icon: 'cloud_done', message: 'New Dog Has Been Added' }) // Add New Dog to the database let newDog = { id: Date.now(), callName: this.callName, regName: this.regName, dogOwner: this.Peepsmodel.value, dogCoOwner: this.dogCoOwner, dogHandler: this.dogHandler, dogBday: this.dogBday, dogBreed: this.dogBreed, dogHeight: this.dogHeight, akcNum: this.akcNum, done: false } db.collection('dogs').add(newDog) // this.dogs.push(newDog) this.newDog = '' } else { this.$q.notify({ type: 'negative', message: `Please fill in all form fields.` }) } },
getpeople() { return new Promise((resolve) => { db.collection('people') .orderBy('l_name') .get() .then((people) => { var myPeeps = [] for (var i = 0 ; i < people.length; i++) { myPeeps.push({value: people[i].id, label: people[i].l_name + ', ' + people[i].f_name}); `` } this.options = myPeeps resolve(people) console.log(" ******* This is the getPeople method ", people) }) }) },