q-table not showing data
-
-
<q-table title="Table Title" :data="products" :config="configs" :columns="columns" :filter="filter" row-key="id" > <q-tr :id="props.row.id" slot="body" slot-scope="props" :props="props"> <q-td key="id" :props="props">{{ props.row.id }}</q-td> <q-td key="name" :props="props">{{ props.row.name }}</q-td> <q-td key="price" :props="props">{{ props.row.price }}</q-td> <q-td key="quantity" :props="props">{{ props.row.quantity }}</q-td> <q-td key="desc" :props="props">{{ props.row.short_description }}</q-td> <q-td key="special_price" :props="props">{{ props.row.special_price }}</q-td> </q-tr> </q-table>
but not showing data, I see data at Vue developer tools but when i click Inspect Dom, the results would be:
<table class="q-table q-table-horizontal-separator"> <thead> <tr> <th class="text-right">#</th> <th class="text-right">name</th><th class="text-right">desc</th> <th class="text-right">quantity</th> <th class="text-right">price</th><th class="text-right">special_price</th> </tr> </thead> <tbody> <tr class="" id="52"> <!----><!----><!----><!----><!----><!----> </tr> <tr class="" id="53"><!----><!----><!----><!----><!----><!----></tr> <tr class="" id="1893"><!----><!----><!----><!----><!----><!----></tr> <tr class="" id="54"><!----><!----><!----><!----><!----><!----></tr> <tr class="" id="55"><!----><!----><!----><!----><!----><!----></tr> </tbody> </table>
What is the problem?
-
Could you please paste the entire component code including that between
script
tags?