时间戳

首页 > 解决方案 > 在 Laravel SPA 中点击分页时页面不会更新

laravel - 在 Laravel SPA 中点击分页时页面不会更新

问题描述

我正在使用 Laravel 和 VUEJS 创建一个 SPA。一切正常：
- 路由从/people到准确更改/people?page=2
- 表中的数据正确显示。

但是，问题是，如果我点击分页，表中的数据不会更新。URL 已更新/people?page=3，但记录仍然相同。以下是我的代码。

路由.js

export default[
{
    path:'/people?page=:page',
    component: ListPeople,
    name: 'people.paginate',
    meta:{
        title: 'Paginate'
    }
},
{
    path: '/people',
    component: ListPeople,
    name: 'people.list',
    meta: {
      title: 'People List', 
    }
},

ListPeople.vue

我在这里列出了表格。

<template>
<div class="container">
    <h1>People List</h1>
    <vue-table v-bind="{data:people.data,columns}"></vue-table>

    <vue-pagination  :pagination="people"
                 @paginate="getPeople"
                 :offset="4">
    </vue-pagination>
</div>

分页.vue

从我的分页中，我有如下内容：

<template>
  <!-- more codes here -->
<router-link class="page-link" :to="{ name:'people.paginate', params:{ page: page }}">{{ page }}</router-link> 
  <!-- more codes here -->
</template>
<script>
 export default{
props: {
  pagination: {
      type: Object,
      required: true
  },
  offset: {
      type: Number,
      default: 4
  }
},
computed: {
  pagesNumber() {
    if (!this.pagination.to) {
      return [];
    }
    let from = this.pagination.current_page - this.offset;
    if (from < 1) {
      from = 1;
    }
    let to = from + (this.offset * 2);
    if (to >= this.pagination.last_page) {
      to = this.pagination.last_page;
    }
    let pagesArray = [];
    for (let page = from; page <= to; page++) {
      pagesArray.push(page);
    }
      return pagesArray;
  }
},
methods : {
  changePage(page) {
    this.pagination.current_page = page;
    this.$emit('paginate',page);
  }
}
 }
</script>

标签： laravelvue.jsvue-router

解决方案

您需要向组件添加一个键，该键vue-table会在分页更改时更改。

<vue-table v-bind="{data:people.data,columns}" :key="currentPage" ></vue-table>

因此，在您的ListPeople组件中，也许在您的getPeople方法中，在您分页时更新键。

  data(){
     return:{
        currentPage: 1;
     }
  }
  methods:{
    getPeople(page){
      //.. do something 
      this.currentPage = page;
    }
}

如果在子组件上包含一个键，当父模板渲染时，Vue 会在该键上设置一个 getter/setter，并自动将其添加到组件的观察者实例中。因此，当键更改时，它会自动重新呈现子组件。如果没有密钥，子组件将保持其缓存状态。

推荐阅读