Страница не обновляется при нажатии на страницы в Laravel SPA - PullRequest
Новая
       22

Страница не обновляется при нажатии на страницы в Laravel SPA

0 голосов
/ 31 мая 2019

Я создаю СПА с Laravel и VUEJS. Все работает хорошо
- Маршрут точно меняется с /people на /people?page=2
- данные в таблице отображаются правильно.

Но проблема в том, что если я нажму на нумерацию страниц, данные внутри таблицы не обновляются. URL обновлен /people?page=3, но записи остаются прежними. Вот мои коды ниже.

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

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

1 Ответ

0 голосов
/ 31 мая 2019

Вам необходимо добавить ключ к вашему 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 устанавливает для ключа метод получения / установки и автоматически добавляет его в экземпляр наблюдателя компонента. Поэтому, когда ключ меняется, он автоматически перерисовывает дочерний компонент. Без ключа дочерний компонент останется в своем кэшированном состоянии.

...