Есть компонент для отображения записей с возможностью пагинации:
<template>
<v-container grid-list-md>
<v-layout row wrap>
<!--Блок с контентом-->
<v-flex sm6 v-for="customer in customers">
<v-card>
<v-card-title>
<div>
<v-btn fab small>
{{customer.id}}
</v-btn>
<v-icon>fas fa-phone</v-icon>
{{customer.phone}}
</div>
</v-card-title>
</v-card>
</v-flex>
<!--Блок пагинации-->
<div class="text-xs-center">
<v-btn fab dark small
v-for="i in +pageCount"
:color="(i == curPage) ? 'primary' : 'blue-grey'"
@click="paginate(i)"
>{{i}}
</v-btn>
</div>
</v-layout>
</v-container>
</template>
<script>
import axios from 'axios';
export default {
name: 'Customer',
data() {
return {
customers: [],
curPage: 0,
pageCount: 0,
}
},
created() {
this.loadCustomers();
},
methods: {
loadCustomers() {
let fullPath = this.$route.fullPath;
axios.get('http://rest.loc' + fullPath)
.then(response => {
this.customers = response.data;
let headers = response.headers;
this.curPage = headers['x-pagination-current-page'];
this.pageCount = headers['x-pagination-page-count'];
})
.catch(e => {
console.log(e);
})
},
paginate(number) {
this.$router.push('/customers?page=' + number);
//Как сделать чтобы работало без следующей строчки
this.loadCustomers();
}
}
}
</script>
1. Пагинация работает только если вызывать
loadCustomers().
2. При нажатии вперед, либо назад в браузере адрес в строке меняется, но данные на странице - нет
Что я упускаю?
Приведу еще router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Customer from './components/Customer'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/customers',
name: 'customers',
component: Customer
}
]
})
Простой
