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

Question

我是 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/

Answer 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"})

但我认为第一个会起作用