如何在VueJS 2中让Bootstrap分页功能正常生效

核心问题 #

你的分页不生效和维护两份数据数组的设计无关，是两个逻辑错误导致的：

• 模板列表渲染绑定了错误的数据源：你已经在计算属性里写好了分页切片逻辑jobs，但v-for遍历的是全量未分页的showJobs，分页逻辑完全没被用到
• 筛选、搜索操作后没有重置页码：当你切换分类或者搜索后，展示的总数据量变少，如果当前页码大于筛选后的总页数，就会出现空白页的异常表现

具体修复操作 #

1. 修改模板的列表遍历对象
   把原来v-for绑定的showJobs替换为分页后的计算属性jobs，同时建议把循环的key从索引换成数据唯一id，避免列表渲染错位：

   <!-- 原代码 -->
   <div
     id="jobs"
     class="job-item"
     v-for="(item, index) in showJobs"
     :key="index"
   >
   
   <!-- 修改后 -->
   <div
     id="jobs"
     class="job-item"
     v-for="(item, index) in jobs"
     :key="item.id"
   >
   

2. 筛选/搜索后重置页码到第一页
   在searchJob和selectFilter两个方法的末尾，添加重置当前页码的逻辑，避免筛选后出现空白页：

   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;
     }
     // 新增：搜索完成后回到第一页
     this.currentPage = 1;
   },
   selectFilter(item) {
     this.selected = item;
     if (this.selected == "All") {
       this.showJobs = this.jobinfos;
     } else {
       this.showJobs = this.jobinfos.filter((i) => i.genres === this.selected);
     }
     // 新增：切换分类后回到第一页
     this.currentPage = 1;
   },
   

额外提示 #

• 你用jobinfos存接口返回的原始全量数据、showJobs存经过筛选/搜索后的待展示数据的设计是完全合理的，不需要调整
• 模板里的item.exprerience存在拼写错误，正确拼写为experience，如果接口返回字段没有拼写错误，这里会无法正常读取工作经验字段的值，记得同步修正

内容的提问来源于stack exchange，提问作者BinChanhKun