display num of records and row number in vue loop

Question

I am displaying my api return/response on my page and is fine. But i would like also need to display the row number and total number of returned records on the page. Can you give me simple example.

Below is my code :

<table width="100%"  border="1">
  <tr>
    <th>row</th>
    <th>Item</th>
    <th>Category</th>
    <th>Description</th>
  </tr>
  <tr v-for="(user,index) in bookData" v-bind:key="user.listData">
    <td>{{ user.index }}</td>
    <td>{{ user.item_id }}</td>
    <td>{{ user.category_id }}</td>
    <td>{{ user.description }}</td>
  </tr>
</table> 

Total Num of returned rows :

Answer 1

To display the number of rows, use bookData.length. Example:

<div>{{ bookData.length }} rows</div>

To display the row number, change user.index in your <td> with index + 1. Example:

<td>{{ index + 1 }}</td>

---

Vue 3 working example:

const { createApp } = Vue;

createApp({
  setup: () => ({
    bookData: [{
      item_id: 'one',
      category_id: 'cat_one',
      description: 'none'
    }, {
      item_id: 'two',
      category_id: 'cat_two',
      description: 'none'
    }]
  })
}).mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
  <table width="100%" border="1">
    <tr>
      <th>row</th>
      <th>Item</th>
      <th>Category</th>
      <th>Description</th>
    </tr>
    <tr v-for="(user,index) in bookData" :key="index">
      <td>{{ index + 1 }}</td>
      <td>{{ user.item_id }}</td>
      <td>{{ user.category_id }}</td>
      <td>{{ user.description }}</td>
    </tr>
  </table>
  <div> {{ bookData.length }} rows
</div>

Vue 2 working example:

new Vue({
  el: '#app',
  data: () => ({
    bookData: [{
      item_id: 'one',
      category_id: 'cat_one',
      description: 'none'
    }, {
      item_id: 'two',
      category_id: 'cat_two',
      description: 'none'
    }]
  })
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <table width="100%" border="1">
    <tr>
      <th>row</th>
      <th>Item</th>
      <th>Category</th>
      <th>Description</th>
    </tr>
    <tr v-for="(user,index) in bookData" :key="index">
      <td>{{ index + 1 }}</td>
      <td>{{ user.item_id }}</td>
      <td>{{ user.category_id }}</td>
      <td>{{ user.description }}</td>
    </tr>
  </table>
  <div> {{ bookData.length }} rows
</div>