Here is how my website appears:
Jobs.vue:
<div
id="jobs"
class="job-item"
v-for="(item, index) in showJobs"
:key="index"
>
<router-link
tag="a"
:to="{ name: 'Detail', params: { id: item.id } }"
>
<h3 class="mleft-27">{{ item.position }}</h3>
</router-link>
<div class="job-info flex-wrap">
<div>
<b>{{ item.exprerience }}</b>
</div>
<div>
<b>{{ item.salary }}</b>
</div>
<div>
<b>{{ item.headequarters }}</b>
</div>
</div>
<div class="info-job flex-wrap">
<div class="list-info-job" v-html="item.content"></div>
<router-link
:to="{ name: 'Detail', params: { id: item.id } }"
>
<button class="btn-detail">See Detail</button>
</router-link>
</div>
</div>
<div class="job-page">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="jobs"
></b-pagination>
The code above was created following the documentation provided by Vue-Bootstrap. Additionally, my page incorporates filters and a search box, which required utilizing 2 arrays of data. Could this be causing any issues? Please review the updated script below and provide me with a 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>
I am new to implementing pagination in VueJS, so any assistance would be greatly appreciated. Thank you for your support!