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

Log in to reply