Quasar Q-Table and Data from Array (IndexedDB & Dexie) - qtableview

Question

I am new to Quasar and Javascript and I'm trying to get data from my database (IndexedDB using Dexie) into my q-table.
I have the skeleton of the q-table and I'm getting the data from Dexie, in the form of an Array, but I don't know how to display the data in the table and I would love some help.
I've read about maybe having to use computed, and/or the map option but I don't know enough about either of those to use them. I've been googling and reading the Quasar docs and I'm still not sure what to do. I don't know if I can put it in a codepen since it's getting data from a database.
I have this live online at https://entrypaws.com/ you may have to hit shift-reload to get the latest version as my host has an online cache it keeps, though I've cleared it. This small table section is reachable by clicking the 'view test table' link in the left sidebar.
Here is my html:
<q-page>
wholething: {{ this.thePersonArray }} // this displays correc
<br/><br/>
hmmm: {{ this.thePersonArray[0].f_lastName }}
<q-table
title="Treats"
:rows="rows"
:columns="columns"
row-key="name"
binary-state-sort
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="lname" :props="props">
{{ props.row.lname }}
</q-td>
<q-td key="dogbreed" :props="props">
<div class="text-pre-wrap">{{ props.row.dogbreed }}</div>
</q-td>
<q-td key="phone" :props="props">
{{ props.row.phone }}
</q-td>
</q-tr>
</template>
</q-table>
</q-page>
</template>
and this is my script:
import { ref } from "vue"
import theDB from "../components/dexiedb.js"
const columns = [
{
name: 'name',
label: 'First Name',
field: row => row.name, // f_lastname:
},
{ name: 'lname', label: 'Last Name', field: 'lname'},
{ name: 'dogbreed', label: 'Dog Breed', field: 'dogbreed'},
{ name: 'phone', label: 'Phone', field: 'phone'},
]
const rows = [
{
name: 'Susan',
lname: 'Smith',
dogbreed: 'Danish-Swedish Farmdog',
phone: '801.810.9990',
},
{
name: 'James',
lname: 'Jones',
dogbreed: 'Kromfohrlander',
phone: '801.930.9999',
},
]
export default {
name: "testtable",
setup() {
return {
columns,
rows
}
}, // end setup
data() {
return {
thePersonArray: [],
}
}, // end data
created() {
this.getTheUsers()
}, // end mounted
methods: {
getTheUsers() {
this.thePersonArray = []
console.log(" getTheUsers 1 ", this.thePersonArray)
this.thePersonArray.push({f_lastName: "Dreamer"}) // if the array is not initialized i seem toget an error
theDB.personTable
.orderBy('f_lastName')
.each((personOBJ) => {
this.thePersonArray.push(personOBJ)
console.log(" inside: ", this.thePersonArray)
}).then(() => {
// Transaction committed.
console.log(" People: Transaction committed")
}).catch(err => {
// Transaction aborted.
console.log(" People: Transaction aborted")
})
console.log(" after done: ", this.thePersonArray)
}
}, // end methods
} // end export
</script>```
I'd love some help. I'm completely stuck.
[1]: https://entrypaws.com/

Answer 1

Try making thePersonArray reactive by using ref
data() {
return {
thePersonArray: ref([]),
}
},
then assign the new array to thePersonArray.value
getTheUsers() {
this.thePersonArray.value = []
I think you might be able to push directly with thePersonArray as I think Vue maps/ wraps/ proxies these methods (whatever they call it :) ), so try
this.thePersonArray.push({f_lastName: "Dreamer"})
and if that doesnt work try
this.thePersonArray.value.push({f_lastName: "Dreamer"})
but I think the first will work