Q-table custom loading state not working

[lesourcil]

Hi, im trying to display a loading state while i fetch my data but everytime i see the triangle icon in black saying loading instead of showing the actual loading template.
Does anybody have an idea ?

<template>
  <q-page>
    <div class="q-pa-md">
      <q-table
        title="CloudCenter Tenants"
        dense
        :data="data"
        :columns="columns"
        :loading="loading"
        :filter="filter"
        color="primary"
        virtual-scroll
        row-key="id"
        :pagination.sync="pagination"
        :rows-per-page-options="[0]"
      >
        <template v-slot:top-right>
          <q-btn
            color="primary"
            icon-right="archive"
            label="Export to csv"
            no-caps
            @click="exportTable"
          />
        </template>
        <template v-slot:loading>
          <q-inner-loading showing color="primary" />
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script>
import { exportFile } from 'quasar'

function wrapCsvValue (val, formatFn) {
  let formatted = formatFn !== undefined
    ? formatFn(val)
    : val

  formatted = formatted === undefined || formatted === null
    ? ''
    : String(formatted)

  formatted = formatted.split('"').join('""')
  /**
   * Excel accepts \n and \r in strings, but some other CSV parsers do not
   * Uncomment the next two lines to escape new lines
   */
  // .split('\n').join('\\n')
  // .split('\r').join('\\r')

  return `"${formatted}"`
}
export default {
  name: 'ccinfo',
  data () {
    return {
      loading: false,
      data: [],
      columns: [
        {
          name: 'desc',
          required: true,
          label: 'Tenant Name',
          align: 'left',
          field: row => row.tenant_name,
          sortable: true
        },
        { name: 'url', align: 'left', label: 'Url', field: 'url' },
        { name: 'owner', align: 'left', label: 'Owner', field: 'owner', sortable: true },
        { name: 'email', align: 'left', label: 'Email', field: 'email', sortable: true },
        { name: 'technical_contact', align: 'left', label: 'Technical Contact', field: 'technical_contact', sortable: true },
        { name: 'admin_url', align: 'left', label: 'Admin Url', field: 'admin_url', sortable: true },
        { name: 'admin_username', align: 'left', label: 'Admin Username', field: 'admin_username', sortable: true },
        { name: 'secondary_approver', align: 'left', label: 'Secondary Approver', field: 'secondary_approver', sortable: true },
        { name: 'tenant_fqdn', align: 'left', label: 'Tenant FQDN', field: 'tenant_fqdn' },
        { name: 'cc_tenant_id', align: 'center', label: 'Tenant ID', field: 'cc_tenant_id', sortable: true },
        { name: 'last_update', align: 'center', label: 'Last Updated', field: 'last_update', sortable: true },
        { name: 'creation_date', align: 'center', label: 'Creation Date', field: 'creation_date', sortable: true },
        { name: 'cost_center', align: 'center', label: 'Cost Center', field: 'cost_center', sortable: true }
      ],
      pagination: {
        rowsPerPage: 0
      }
    }
  },

  created () {
    this.getCloudcenterInfo({
      filter: this.filter
    })
  },

  methods: {
    exportTable () {
      // naive encoding to csv format
      const content = [this.columns.map(col => wrapCsvValue(col.label))].concat(
        this.data.map(row => this.columns.map(col => wrapCsvValue(
          typeof col.field === 'function'
            ? col.field(row)
            : row[col.field === undefined ? col.name : col.field],
          col.format
        )).join(','))
      ).join('\r\n')

      const status = exportFile(
        'CloudCenter_Tenants.csv',
        content,
        'text/csv'
      )

      if (status !== true) {
        this.$q.notify({
          message: 'Browser denied file download...',
          color: 'negative',
          icon: 'warning'
        })
      }
    },

    getCloudcenterInfo ({ filter }) {
      this.loading = true
      this.$axios
        .get('/api/info/cloudcenter/')
        .then(response => {
          this.data = response.data
          this.loading = false
        })
        .catch(err => {
          this.$q.notify({
            color: 'negative',
            position: 'top',
            message: err.message,
            icon: 'report_problem'
          })
          this.loading = false
        })
    }
  }
}
</script>

If I remove all the “this.loading = false”, it works. It seems like since its happening so quick. It doesn’t have time to show the loading state but why do i see the “no data messsage” saying “loading” ??

Anybody has an idea ?

[metalsadman]

@lesourcil your code looks fine, so there’s something somewhere I suggest you put some console logs to see where it fails.

[lesourcil]

@metalsadman Ok, but im not sure what im looking to output here ?

[lesourcil]

Ho! and to add a bit of info, if I add a v-if=“loading” on the q-table, then the table will dissapear just fine is there is no data loaded.

[metalsadman]

@lesourcil like I said there’s nothing wrong in your code as far as I can tell in your snippet above, what you could do is set some logs and check your dev tools for errors, or. Log the data if it’s in correct form and etc…

[lesourcil]

Thx. I’ll try that.