Quasar Q 表和数组中的数据(IndexedDB 和 Dexie)
Posted
技术标签:
【中文标题】Quasar Q 表和数组中的数据(IndexedDB 和 Dexie)【英文标题】:Quasar Q-Table and Data from Array (IndexedDB & Dexie) 【发布时间】:2021-10-26 14:57:37 【问题描述】:我是 Quasar 和 javascript 的新手,我正在尝试将数据从我的数据库(使用 Dexie 的 IndexedDB)中获取到我的 q 表中。
我有 q 表的骨架,我从 Dexie 以数组的形式获取数据,但我不知道如何在表中显示数据,我希望得到一些帮助。
我读过可能不得不使用计算和/或地图选项,但我对其中任何一个都不太了解,无法使用它们。我一直在谷歌搜索和阅读 Quasar 文档,但我仍然不确定该怎么做。我不知道我是否可以将它放入 codepen,因为它是从数据库中获取数据的。
我在https://entrypaws.com/ 有这个在线直播,你可能需要点击 shift-reload 来获取最新版本,因为我的主机有一个在线缓存,虽然我已经清除了它。点击左侧边栏中的“查看测试表”链接可以访问这个小表格部分。
这是我的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>
这是我的脚本:
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/
【问题讨论】:
【参考方案1】:尝试使用ref
使thePersonArray
具有反应性
data()
return
thePersonArray: ref([]),
,
然后将新数组分配给thePersonArray.value
getTheUsers()
this.thePersonArray.value = []
我认为您可以直接使用 thePersonArray 推送,因为我认为 Vue 映射/包装/代理这些方法(无论他们怎么称呼它 :)),所以试试
this.thePersonArray.push(f_lastName: "Dreamer")
如果这不起作用,请尝试
this.thePersonArray.value.push(f_lastName: "Dreamer")
但我认为第一个会起作用
【讨论】:
感谢您的回复。我仍在断断续续地进行这项工作,但仍然无法使其正常工作。我想我需要将我的数据加载到列或行中,但它不起作用。就像 field: row => row.name 一样,必须是 field: row => this。 thePersonArray.f_name 但这也不起作用。以上是关于Quasar Q 表和数组中的数据(IndexedDB 和 Dexie)的主要内容,如果未能解决你的问题,请参考以下文章