Quasar q-table not rendering data from 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>

I'm starting up with quasar framework and trying to get a simple q-table that gets populated from an ajax call. I don't see any errors (which would have been helpful) but data is not showing up. Is there something I'm missing here. Any pointers would help.

Also, I see the data coming back from the ajax call. But data is not making it to the q-table.

Best,

Answer 1

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

While debugging i can get the data but in table it is showing as empty

Answer 2

I've been following some old tutorials. Apparently its no longer :data for q-table but :rows.