Quasar Q 表和数组中的数据（IndexedDB 和 Dexie）

Posted 2023-03-30

【中文标题】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 但这也不起作用。