如何在VueJS 2中使引导分页工作

Question

我的网站是这样的:

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>

下面是我根据Vue-Bootstrap的文档编写的脚本。另一件事是，我的页面使用过滤器和搜索框所以我必须放两个数据数组，这是问题吗?我已经更新了所有的脚本代码，你可以检查它并给我解决方案

<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>

老实说，我从来没有在VueJS中做过分页工作，所以希望得到大家的一些帮助。非常感谢

Answer 1

b-pagination组件非常简单——它接受一些记录(行)和应该显示的记录数量(perPage)，并创建一个具有适当数量的页面的组件。currentPage变量告诉您应该在哪个页面上，应该显示哪些记录，但是由您来告诉上层组件应该呈现什么。我认为在你的例子中.slice()应该工作。该方法根据所提供的值返回数组的一部分，这些值可以使用currentPage和perPage变量确定。我准备了代码片段来演示-我没有你的CSS，所以它可能看起来有点不同，但它应该清楚地看到它是如何工作的。

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 class="job-item" v-for="(item, index) in jobs" :key="index">
<a tag="a" :to="{ name: 'Detail', params: { id: item.id } }">
<h3 class="mleft-27">{{ item.position }}</h3>
</a>
<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>
<a :to="{ name: 'Detail', params: { id: item.id } }">
<button class="btn-detail">See Detail</button>
</a>
</div>
</div>
<div class="job-page">
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="jobs" />
</div>
</div>