Get Data with Dexie and show in q-table

[cynderkromi]

I need to pull all the records from my IndexedDB table (via Dexie) and show the records in a Quasar Table (q-table)

I’ve been searching online but I’m not sure how to get the data into the q-table.

Here is my code so far.

All the hard coded data is showing in the table just fine, but I don’t know the syntax I need to show the data from the IndexeddB table in the q-table.

And when I search for these terms, Google tends to confusing database table fields with q-table results.

Help appreciated!

And my web page is live, you can see what I mean about the tables. I hard coded an old fashioned type table, which I guess works, but I’d prefer to use a q-table.

http://bristlenosedog.com/enter/#/

          {{ this.entriesArray }} // this shows the fields fine

        <q-table
          title="Dogs and Classes Entered"
          :data="tableData"
          :columns="tableColumns"
          row-key="name"
          :separator="separator"
        >
        <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="name" :props="props">
            {{ props.row.name }}
            </q-td> 
          <q-td key="name" :props="props">
            {{ props.row.calories }}
            </q-td> 
          <q-td key="name" :props="props">
            {{ props.row.fat }}
            </q-td> 
        </q-tr>
      </template>
    </q-table>

 tableColumns: [
        {
          name: 'name',
          required: true,
          label: 'Dog Name',
          align: 'center',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'Sat 5/1 FDC T1', align: 'center', label: 'Sat 5/1 FDC T1', field: 'fdc01' },
        { name: 'Sat 5/1 FDC T2', align: 'center', label: 'Sat 5/1 FDC T2', field: 'fdc02' },
        { name: 'Sat 5/1 ATT T1', align: 'center', label: 'Sat 5/1 ATT T1', field: 'att01' },
        { name: 'Sat 5/1 ATT T2', align: 'center', label: 'Sat 5/1 ATT T2', field: 'att02' },

        { name: 'Sat 5/2 FDC T1', align: 'center', label: 'Sat 5/2 FDC T1', field: 'fdc03' },
        { name: 'Sat 5/2 FDC T2', align: 'center', label: 'Sat 5/2 FDC T2', field: 'fdc04' },
        { name: 'Sat 5/2 ATT T1', align: 'center', label: 'Sat 5/2 ATT T1', field: 'att03' },
      ],
      tableData: [
        {
          name: 'Jet',
          align: 'center',
          label: 'theLabel',
          field: 'field',
          calories: 39,
          fat: 18,
          fromDb: this.entriesArray
        } 
      ],

This is my method that I call in the mounted method to get the data when the page loads. The data is loading fine because i can see it on the page when I display it outside of the table.

    getAllEntries() { // Get all the entries from the database
      console.log("     getAllEntries START")
      enterFDC.tableEntries
        .each(entryOBJ => {
          this.entriesArray.push(entryOBJ)
        })
      console.log("     getAllEntries END", this.entriesArray)
    },

[dobbel]

@cynderkromi

The reason you don’t see any change in the page is because of how Vue2.js handles reactivity for mutating Array and Object values.

See:
https://vuejs.org/v2/guide/reactivity.html

// will not work
this.entriesArray.push(entryOBJ)

// will work
import Vue from "Vue"
...
.each((entryOBJ , index) => {
      Vue.set(this.entriesArray, index, entryOBJ)
)

[cynderkromi]

@dobbel Hmm… my q-table isn’t populating at all. That was actually my question. How do I get the q-table to show the data from the database?

[dobbel]

@cynderkromi

fromDb does not make any sense…it’s a nested object inside tableData. Where tableData is your model for the qtable and contains just 1 record (no matter the value of fromDb).

Please create a working a codepen.io so people can help you better.

[cynderkromi]

@dobbel It doesn’t make any sense because I don’t know the syntax to make it work correctly. That’s why I need help, so I can get that to work, I have no idea how.

[dobbel]

@cynderkromi

That’s why I need help, so I can get that to work

It’s pretty hard to help because I have no idea what is inside of an entryOBJ. Again the best way to get help is to create a codepen.io to demonstrate your problem.

Here’s a try:

getAllEntries() { 
       enterFDC.tableEntries.each(entryOBJ => {
          this.entriesArray.push(entryOBJ)
        })
       this.tableData = this.entriesArray
},

you’ll have to match the content of an entryOBJ to the columns of the table tableColumns