Laravel9+Vue3分页按钮点击无响应问题排查求助

核心问题分析 #

• 后端数据限制：Controller中使用take(3)仅返回3条数据，前端list_lowongan长度固定为3，计算出的totalPages为1，导致nextPage的判断条件永远不成立，无法切换页码；同时没有足够数据支持分页切换。
• 模板结构错误：分页导航(<nav>)被嵌套在v-for循环的容器内部，会为每条数据渲染一个分页组件，实际点击的按钮可能不是预期的目标，甚至导致事件绑定失效。
• 响应式字段缺失：后端返回的数据没有showBody和isRotated字段，直接修改这些属性无法触发Vue的响应式更新（虽不是分页无响应的直接原因，但属于潜在问题）。

修复方案 #

1. 修正后端Controller代码 #

移除take(3)，返回全部数据，由前端处理分页逻辑：

public function index()
{
    $list_lowongan = Lowongan::orderBy('id', 'desc')->get();
    return response()->json($list_lowongan);
}

2. 调整Vue模板结构 #

将分页导航移到v-for循环外部，确保只渲染一个分页组件：

<template>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
  <div class="pageLowongan" id="posisiTersedia">
      <h1><span class="judulLowongankarir">Posisi yang tersedia</span></h1>
      <p class="bawahJudulLowongankarir">JAI’ membuka lowongan pekerjaan yang<br class="brlowyang"> sesuai dengan dirimu, mari tumbuh bersama<br class="brlowyang"> dan upgrade skillmu!</p>
      <!-- 仅用v-for包裹数据条目 -->
      <div class="courses-container" v-for="(value, index) in paginatedList" :key="value.id" id="slotKerjaP">
        <div class="course">
          <div class="course-info1" id="slotKerja1">
            <h2 class="lowongank1"> {{ value.title }}</h2>
            <button id="pagiLowongan2" @click="toggleBody(index)"><img src="images/vectorlow.png" :class="{ 'rotated': value.isRotated}" id="vectorapply"></button>
              <p class="descJobk1">{{ value.body }}</p>
              <p class="textDesc" v-if="value.showBody">Job Description : </p>
              <div v-html="value.jobdesc" class="textDescKecil" v-if="value.showBody"></div>
              <p class="textDesc" v-if="value.showBody">Requirements : </p>
              <div v-html="value.req" class="textDescKecil" v-if="value.showBody"></div>
              <p class="textDesc" v-if="value.showBody">Work Type : {{ value.worktype }} </p>
              <p class="Locationlow" v-if="value.showBody">Location : {{ value.location }} </p>
              <p class="Locationlow" v-if="value.showBody">Employment Type : {{ value.employmenttype }} </p>
              <router-link :to="`applys/${value.id}`" class="routesApply" v-if="value.showBody">Apply</router-link>          
              <hr class="garisJobk1">
            </div>
          </div>
        </div>         
      <!-- 分页导航移至循环外部 -->
      <nav aria-label="naviMedia1">
        <ul class="pagination" id="pagiIpad10">
          <li class="page-item5"><a class="page-link" type="button" data-bs-slide="prev" id="pagiKarir1" @click="prevPage"><img src="images/mediaarrow2.png"></a></li>
          <li class="page-item6"><a class="page-link" type="button" data-bs-slide="next" id="pagiKarir2" @click="nextPage"><img src="images/mediaarrow1.png"></a></li>
        </ul>
    </nav>
  </div>
</template>

3. 完善响应式数据处理 #

在获取后端数据后，为每条数据添加showBody和isRotated字段，确保响应式更新：

mounted() {
  console.log('on mounted');
  axios.get('lowongan/list').then((response) => {
    console.log(response.data)
    // 为每条数据注入响应式字段
    this.list_lowongan = response.data.map(item => ({
      ...item,
      showBody: false,
      isRotated: false
    }))
  }).catch((error) => {
    console.log(error)
  });
}

4. 可选：添加调试日志 #

在分页方法中添加日志，确认方法是否被触发：

methods: {
  // ...其他方法
  prevPage() {
    console.log('上一页按钮被触发')
    if (this.currentPage > 1) {
      this.currentPage--;
    }
  },
  nextPage() {
    console.log('下一页按钮被触发，总页数：', this.totalPages)
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
    }
  }
}

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