My website looks like this:

Jobs.vue:

        <div
          id="jobs"
          
          v-for="(item, index) in showJobs"
          :key="index"
        >
          <router-link
            tag="a"
            :to="{ name: 'Detail', params: { id: item.id } }"
          >
            <h3 >{{ item.position }}</h3>
          </router-link>
          <div >
              <div>                
                <b>{{ item.exprerience }}</b>
              </div>
              <div>
                <b>{{ item.salary }}</b>
              </div>
              <div>                
                <b>{{ item.headequarters }}</b>              
            </div>                   
          </div>
          <div >
            <div  v-html="item.content"></div>
            <router-link
              :to="{ name: 'Detail', params: { id: item.id } }"
            >
              <button >See Detail</button>
            </router-link>
          </div>
        </div>
        <div >
          <b-pagination
            v-model="currentPage"
            :total-rows="rows"
            :per-page="perPage"
            aria-controls="jobs"
        ></b-pagination>

Here is the script that I followed according to the docs from Vue-Bootstrap. And another thing is that my page uses filter and search box so I have to put 2 arrays of data, is this the problem? I have updated all the script code you can check it out and give me the solution

<script>
import "../assets/job.css";
import axios from "axios";
export default {
  name: "jobs",
  data() {
    return {
      currentPage: 1,
      perPage: 2,
      search: "",
      noData: [],
      display: {
        group_filter: "",
        btn_show_filter: "",
        btn_close_filter: "",
      },
      checks: ["All", "Developer", "Tester", "Designer", "Support"],
      jobinfos: [],
      showJobs: [],
      selected: "All",
    };
  },
  computed: {
     jobs() {
      return this.showJobs.slice((this.currentPage - 1) * this.perPage, (this.currentPage * this.perPage));
    },
    rows() {
      return this.showJobs.length;
    },
  },
  mounted() {
    this.getJobs();
    var self = this;
    window.addEventListener("keyup", function (event) {
      if (event.keyCode === 13) {
        self.searchJob();
      }
    });
  },
  methods: {
    async getJobs() {
      await axios
        .get(`http://localhost:1337/jobinfos`)
        .then((response) => {
          this.jobinfos = response.data;
          this.showJobs = response.data;
        })
        .catch((e) => {});
    },

    searchJob() {
      if (this.selected == "All") {
        this.showJobs = this.jobinfos;
      }
      if (this.selected != "All") {
        this.showJobs = this.jobinfos.filter((i) => i.genres === this.selected);
      }
      if (this.search.length > 1) {
        let searchedJobs = this.showJobs.filter((job) =>
          job.position.toLowerCase().includes(this.search.toLowerCase())
        );
        this.showJobs = searchedJobs;
      }
    },
    selectFilter(item) {
      this.selected = item;
      if (this.selected == "All") {
        this.showJobs = this.jobinfos;
      } else {
        this.showJobs = this.jobinfos.filter((i) => i.genres === this.selected);
      }
    },
  },
};
</script>

To be honest i have never done pagination work in VueJS so hope to get some help from everyone. Thank you very much

CodePudding user response：

The behaviour of the b-pagination component is very simple - it takes a number of records (rows) and the number of records that should be displayed (perPage) and creates a component with an appropriate number of pages. The currentPage variable tells you on which page you should be and which records should be displayed, but it is up to you to tell the upper component what should it render. I think that in your case the .slice() should work. This method returns a portion of an array, based on provided values that can be determined with the use of the currentPage and perPage variables. I prepared code snipped to demonstrate that - I do not have your CSS so it might look a little bit different but it should be clearly visible how it works.

new Vue({
  el: '#jobs',
  data() {
    return {
      currentPage: 1,
      perPage: 2,
      showJobs: [{
          position: 'position1',
          exprerience: 'exprerience1',
          salary: 'salary1',
          headequarters: 'headequarters1'
        },
        {
          position: 'position2',
          exprerience: 'exprerience2',
          salary: 'salary2',
          headequarters: 'headequarters2'
        },
        {
          position: 'position3',
          exprerience: 'exprerience3',
          salary: 'salary3',
          headequarters: 'headequarters3'
        },
        {
          position: 'position4',
          exprerience: 'exprerience4',
          salary: 'salary',
          headequarters: 'headequarters4'
        }
      ],
    };
  },
  computed: {
    jobs() {
      return this.showJobs.slice((this.currentPage - 1) * this.perPage, (this.currentPage * this.perPage));
    },
    rows() {
      return this.showJobs.length;
    }
  }
});

<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.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="jobs">
  <div  v-for="(item, index) in jobs" :key="index">
    <a tag="a" :to="{ name: 'Detail', params: { id: item.id } }">
      <h3 >{{ item.position }}</h3>
    </a>
    <div >
      <div>
        <b>{{ item.exprerience }}</b>
      </div>
      <div>
        <b>{{ item.salary }}</b>
      </div>
      <div>
        <b>{{ item.headequarters }}</b>
      </div>
    </div>
    <div >
      <div  v-html="item.content"></div>
      <a :to="{ name: 'Detail', params: { id: item.id } }">
        <button >See Detail</button>
      </a>
    </div>
  </div>
  <div >
    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="jobs" />
  </div>
</div>