Quasar q-table 未从 AJAX 呈现数据

Question

<template>
<q-page>
    <div class="q-pa-md">
    <q-table
      title="posts"
      dense
      :data="posts"
      :columns="columns"
      row-key="name"
    ></q-table>
  </div>
</q-page>
</template>

<script>
import { api } from 'boot/axios'

export default {
    name: 'PageIndex',
    data () {
        return {
            columns: [
                {
                    name: 'id',
                    label: 'the id',
                    field: 'id',
                    align: 'left',
                    sortable: true
                }
            ],
            posts: []
        }
    },  
    methods: {
        getPosts () {
            api.get('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                this.posts = response.data
                console.log(this.posts)
            })
            .catch(error =>{
                console.log(error)
            })
        }
    },
    mounted () {
        this.getPosts()
    }
}
</script>

我开始使用 quasar 框架，并试图获得一个简单的 q-table，该 q-table 由 ajax 调用填充。我没有看到任何错误（这会很有帮助），但没有显示数据。有什么我在这里想念的吗。任何指针都会有所帮助。

另外，我看到了从 ajax 调用返回的数据。但是数据没有进入 q-table。

最好的，

Answer 1

我一直在关注一些旧教程。显然它不再是 :data for q-table 而是 :rows。

Answer 2

Is it working fine now? for me it is not working please help. is this q-table thing only for vue3 not for vue2?
<q-table
    :rows="rows"
    :columns="columns"
     row-key="id"
     :pagination="pagination"
     :loading="loading"
     :dense="$q.screen.xs"
      @request="onRequest"
      binary-state-sort
>

data () {
    return {
      loading: false,
      pagination: {
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 3,
        rowsNumber: 10
      },
      columns: [
        { name: 'desc', label: 'Description', align: 'left', headerStyle: 'width: 400px', style: 'width: 400px' },
        { name: 'calories', align: 'center', label: 'Charge' },
        { name: 'fat', label: 'Tax', required: false },
        { name: 'carbs', label: 'Amount' }
      ],
      originalRows: [
        { id: 1, name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, sodium: 87, calcium: '14%', iron: '1%' },
        { id: 2, name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, sodium: 129, calcium: '8%', iron: '1%' },
        { id: 3, name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, sodium: 337, calcium: '6%', iron: '7%' },
        { id: 4, name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium: '3%', iron: '8%' }
      ],
      rows: []
    }
  },
  mounted () {
    // get initial data from server (1st page)
    this.onRequest({
      pagination: this.pagination
    })
  },
  methods: {
    onRequest (props) {
      const { page, rowsPerPage, sortBy, descending } = props.pagination
      this.loading = true

      // emulate server
      setTimeout(() => {
        // update rowsCount with appropriate value
        this.pagination.rowsNumber = this.originalRows.length

        // get all rows if "All" (0) is selected
        const fetchCount = rowsPerPage === 0 ? this.pagination.rowsNumber : rowsPerPage

        // calculate starting row of data
        const startRow = (page - 1) * rowsPerPage

        // fetch data from "server"
        const returnedData = this.fetchFromServer(startRow, fetchCount, sortBy, descending)

        // clear out existing data and add new
        this.rows.splice(0, this.rows.length, ...returnedData)

        // don't forget to update local pagination object
        this.pagination.page = page
        this.pagination.rowsPerPage = rowsPerPage
        this.pagination.sortBy = sortBy
        this.pagination.descending = descending

        // ...and turn of loading indicator
        this.loading = false
      }, 1500)
    },
    // emulate ajax call
    // SELECT * FROM ... WHERE...LIMIT...
      const data = this.originalRows.slice()

      // handle sortBy
      if (sortBy) {
        const sortFn = sortBy === 'desc'
          ? (descending
            ? (a, b) => (a.name > b.name ? -1 : a.name < b.name ? 1 : 0)
            : (a, b) => (a.name > b.name ? 1 : a.name < b.name ? -1 : 0)
          )
          : (descending
            ? (a, b) => (parseFloat(b[sortBy]) - parseFloat(a[sortBy]))
            : (a, b) => (parseFloat(a[sortBy]) - parseFloat(b[sortBy]))
          )
        data.sort(sortFn)
      }
      return data.slice(startRow, startRow + count)
    }
  }

在调试时我可以获取数据，但在表格中显示为空