Question

我正在使用Laravel和VUEJS创建SPA。一切正常：
-路由从<div class="row"> <div class="col-md-3"> <div class="card mb-3"> <div class="row no-gutters"> <div class="col-md-4"> <div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Attack on Titan</h5> <p class="card-text">Airs Sunday :: 10 eps</p>" <div class="col-md-4"> <div class="card mb-3"> <div class="row no-gutters"> <div class="col-md-3"> <div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1068/97169l.jpg" class="card-img-top" class="card-img" alt="..."></div> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">The Rising of the Shield Hero</h5> <p class="card-text">Airs Wednesday :: 26 eps</p> <div class="status"></div> </div> </div> </div> </div> </div> <div class="col-md-5"> <div class="card mb-3"> <div class="row no-gutters"> <div class="col-md-3"> <div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1130/99458l.jpg" class="card-img-top" class="card-img-top" class="card-img" alt="..."></div> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Hitori Bocchi no Maru Maru Seikatsu</h5> <p class="card-text">Airs Saturday :: 12 eps</p> <div class="status"></div> </div> </div> </div>准确更改为/people
-表中的数据正确显示。

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

routes.js

/people?page=3

ListPeople.vue

我在这里列出了表格。

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', 
    }
},

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

Answer 1

您需要向分页更改时更改的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并将其自动添加到该组件的观察者实例中。因此，当键更改时，它会自动重新渲染子组件。没有密钥，子组件将保持其缓存状态。

页面不会在Laravel SPA中的分页单击上更新

1 个答案: