Populate q-select from Database (indexedDB/localbase)

cynderkromi

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.

Ilia

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

cynderkromi

This post is deleted!

cynderkromi

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