No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Populate q-select from Database (indexedDB/localbase)

    Help
    2
    4
    51
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cynderkromi last edited by

      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.

      I 1 Reply Last reply Reply Quote 0
      • I
        Ilia @cynderkromi last edited by

        @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()
        }
        
        C 1 Reply Last reply Reply Quote 0
        • C
          cynderkromi @Ilia last edited by cynderkromi

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • C
            cynderkromi last edited by 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)
                     })
                 })
            },
            
            1 Reply Last reply Reply Quote 0
            • First post
              Last post