How can I make row number in vue component?

Question

I have two component vue

My first component like this :

<template>
  <div>
    <b-row>
      <div class="pl-2 d-flex">
        <div class="card-body">
          <p class="mb-0 w-5 w-sm-100">Number</p>
          <div class="w-30 w-sm-100">Description</div>
          <div class="w-20 w-sm-100">Date</div>
          <div class="w-10 w-sm-100">Modified By</div>
        </div>
      </div>
    </b-row>

    <b-row key="list">
      <b-colxx xxs="12" class="mb-3" v-for="(item,index) in items" :key="index" :id="item.id">
        <list-item
          :key="item.id"
          :data="item"
          :index="index"
        />
      </b-colxx>
    </b-row>
    ...
        <b-pagination-nav
          ...
        >
        </b-pagination-nav>
    ...
  </div>
</template>
<script>
import ListItem from "./ListItem";
export default {
  components: {
    "list-item": ListItem
  },
};
</script>

My second component / child component like this :

<template>
<b-card no-body>
    <div class="pl-2 d-flex">
        <div class="card-body">
            <p class="mb-0 text-muted w-5">{{index+1}}</p>
            <p class="mb-0 text-muted w-30">{{data.description}}</p>
            <p class="mb-0 text-muted w-20">{{data.date}}</p>
            <p class="mb-0 text-muted w-10">{{data.created_by}}</p>
        </div>
    </div>
</b-card>
</template>

<script>
export default {
    props: ['data', 'index'],
}
</script>

I use index to give row number. But the problem is when I move the page to another page, the line number will return to number 1

How can I solve this problem?

Please help. Thanks

Answer 1

You can create computed property, add line numbers to your items and loop over it:

new Vue({
  el: '#demo',
  data() {
    return {
      items: [],
      fields: [{key: "lineNumber", label: "Number",}, {key: "postId", label: "Post ID",}, {key: "id", label: "ID",}, {key: "name", label: "Name",}, {key: "email", label: "Email",}, {key: "body", label: "Body",},],
      currentPage: 0,
      perPage: 10,
      totalItems: 0,
    }
  },
  computed: {
    itemsWithLineNumber() {
      return this.items.map((item, idx) => {
        return {
          ...item,
          lineNumber: (this.currentPage - 1) * this.perPage + idx + 1,
        };
      });
    },
  },
  methods: {
    async fetchData() {
      await axios
        .get(
          `https://jsonplaceholder.typicode.com/comments?_page=${this.currentPage}&_limit=${this.perPage}`
        )
        .then((res) => {
          this.totalItems = 500;
          this.items = res.data;
        });
    },
    changePage(nr) {
      this.pageNr = nr
    }
  },
  watch: {
    currentPage: {
      handler: function (value) {
        this.fetchData().catch((error) => {
          console.error(error);
        });
      },
    },
  },
  async mounted() {
    await this.fetchData()
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  <div>
    <b-table
      show-empty
      :items="itemsWithLineNumber"
      :fields="fields"
      :current-page="currentPage"
      :per-page="0"
    ></b-table>
    <b-pagination
      size="md"
      :total-rows="totalItems"
      v-model="currentPage"
      :per-page="perPage"
    ></b-pagination>
  </div>
</div>