No data is displayed using axios from curl backend

[VinceSanityyy]

I have a custom pagination and a computed property named paginatedData which returns 10 rows. tried to use the package, there is no error but the data is not displayed. Can tell what i did wrong?

my component

<div class="table-responsive">
   <sorted-table :values="paginatedData">
      <table class="table table-report">
         <thead>
            <tr>
               <th scope="col">
                  <sort-link name="strUpper">Name</sort-link>
               </th>
               <th>No. of Listing</th>
               <th>Successful Posts</th>
               <th>No. of Chopes</th>
               <th>Chopper Rejected</th>
               <th>Chopes Transacted</th>
            </tr>
         </thead>
         <tbody slot="body" slot-scope="sort">
            <tr v-for="(agent,index) in sort.paginatedData" :key="index">
               <td >{{ucwords(strUpper[index])}}</td>
               <td>{{agent.listings}}</td>
               <td>{{agent.postings}}</td>
               <td>{{agent.chopes}}</td>
               <td>{{agent.rejects}}</td>
               <td>{{agent.transacted}}</td>
            </tr>
         </tbody>
      </table>
   </sorted-table>
   <h6>Showing page {{pageNumber+1}} of {{pageCount}}</h6>
   <ul class="pagination">
      <li class="page-item"><button @click="prevPage" :disabled="pageNumber==0" class="btn btn-light">Prev.</button></li>
      &nbsp;
      <li class="page-item"><button @click="nextPage" :disabled="pageNumber >= pageCount -1" class="btn btn-light">Next</button></li>
   </ul>
</div>

Here is some of my methods

 data(){
        return{
          display:'7days',
          dashboard_data:[],
          agents:[],
          pageNumber: 0,

        }
    },
    props:{
      size:{
        type:Number,
        required:false,
        default: 10
      }
    },
    computed:{
      strUpper(){
       return this.paginatedData.map((b)=>{
        b.bizname = b.bizname.toLowerCase()
        return b.bizname
       })
      },
      pageCount(){
      let l = this.agents.length,
          s = this.size;
      return Math.ceil(l/s);
      },
      paginatedData(){
        const start = this.pageNumber * this.size,
        end = start + this.size;
        return this.agents.slice(start, end);
      },
    },
 methods:{
       nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      },
 }

[BernhardtD]

Hi @VinceSanityyy, thanks for using this component. I had a look and the issue is the additional table element:

<sorted-table :values="paginatedData">
  <table class="table table-report">
     <thead>
        // [..]
     </thead>
     <tbody slot="body" slot-scope="sort">
        // [..]
     </tbody>
  </table>
</sorted-table>

Please change to:

<sorted-table :values="paginatedData" class="table table-report">
 <thead>
    // [..]
 </thead>
 <tbody slot="body" slot-scope="sort">
    // [..]
 </tbody>
</sorted-table>

The sorted-table component will add the table element for you.

[VinceSanityyy]

okay will do that later. thanks for replying @BernhardtD . this is awesome package. also i will close the issue if it works for me. Thanks :)

[VinceSanityyy]

@BernhardtD its still the data is not showing. Even I changed it into

   <sorted-table :values="paginatedData" class="table table-report">
         <thead>
            <tr>
               <th scope="col">
                  <sort-link name="strUpper">Name</sort-link>
               </th>
               <th>No. of Listing</th>
               <th>Successful Posts</th>
               <th>No. of Chopes</th>
               <th>Chopper Rejected</th>
               <th>Chopes Transacted</th>
            </tr>
         </thead>
         <tbody slot="body" slot-scope="sort">
            <tr v-for="(agent,index) in sort.paginatedData" :key="index">
               <td >{{ucwords(strUpper[index])}}</td>
               <td>{{agent.listings}}</td>
               <td>{{agent.postings}}</td>
               <td>{{agent.chopes}}</td>
               <td>{{agent.rejects}}</td>
               <td>{{agent.transacted}}</td>
            </tr>
         </tbody>
   </sorted-table>

And itt got me this

[BernhardtD]

I found another issue:

<tr v-for="(agent,index) in sort.paginatedData" :key="index">

should be

<tr v-for="(agent,index) in sort.values" :key="index">

because values is the provided property within the slot.

I prepared a working example on codesandbox: Please note that I had to remove the unknown function ucwords. Also the sorting itself does not work, because the property strUpper does not exists on the paginatedData object. You could replace it with bizname, but the returned data of the computed property strUpper will not be updated. So I recommend to refactor the code and to not use computed properties based on sorted values within the slot. Instead you should use a computed property to prepare the values passed to the sorted table. You can find an example here:

[VinceSanityyy]

I tried it @BernhardtD . The data is showing but whenever i click the header it wont sort. heres what current output

 <sorted-table :values="paginatedData" class="table table-report">
         <thead>
            <tr>
               <th scope="col">
                  <sort-link name="strUpper">Name</sort-link>
               </th>
               <th>No. of Listing</th>
               <th>Successful Posts</th>
               <th>No. of Chopes</th>
               <th>Chopper Rejected</th>
               <th>Chopes Transacted</th>
            </tr>
         </thead>
         <tbody slot="body" slot-scope="sort">
            <tr v-for="(agent,index) in sort.values" :key="index">
               <td >{{agent.bizname}}</td>
               <td>{{agent.listings}}</td>
               <td>{{agent.postings}}</td>
               <td>{{agent.chopes}}</td>
               <td>{{agent.rejects}}</td>
               <td>{{agent.transacted}}</td>
            </tr>
         </tbody>
   </sorted-table>

[BernhardtD]

That's the point I mentioned in my previous comment. If you want to sort the data by the bizname, the name property of the sort-link should be:

<sort-link name="bizname">Name</sort-link> 

The name has to be a object key name of the elements passed as values.

[VinceSanityyy]

Oh i didint notice that. sorry for my mistake. Thanks for the help sir ! Great package.