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?


Log in to reply