Я использую Laravel и Vue Js для вывода списка данных и разбивки данных на страницы с помощью компонента vue, без использования компонента мой код работает нормально, но когда я использую компонент, панель разбивки на страницы работает, но не синхронизируется с листингом,
Вот мой HTML
<!DOCTYPE html>
<html>
<head>
<title>Users List</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
</head>
<body>
<div class="container" id="users">
<!-- Item Listing -->
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
</tr>
<tr v-for="user in users">
<td>@{{ user.name }}</td>
<td>@{{ user.email }}</td>
<td>@{{ user.created_at }}</td>
</tr>
</table>
<vue-pagination></vue-pagination>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue.resource/0.9.3/vue-resource.min.js"></script>
<script type="text/javascript" src="/js/users.js"></script>
</body>
</html>А вот мой код Vue Js
var VueComponent = Vue.extend({
template:
'<nav>' +
'<ul class="pagination">' +
'<li v-if="pagination.current_page > 1">' +
'<a href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)">' +
'<span aria-hidden="true">«</span>' +
'</a>' +
'</li>' +
'<li v-for="page in pagesNumber" :class="{\'active\': page == pagination.current_page}">' +
'<a href="#" @click.prevent="changePage(page)">{{ page }}</a>' +
'</li>' +
'<li v-if="pagination.current_page < pagination.last_page">' +
'<a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">' +
'<span aria-hidden="true">»</span>' +
'</a>' +
'</li>' +
'</ul>' +
'</nav>',
props: ['user'],
data: function() {
return {
pagination: {
total: 0,
per_page: 2,
from: 1,
to: 0,
current_page: 1
},
offset: 4,
}
},
computed: {
isActived: function () {
return this.pagination.current_page;
},
pagesNumber: function () {
if (!this.pagination.to) {
return [];
}
var from = this.pagination.current_page - this.offset;
if (from < 1) {
from = 1;
}
var to = from + (this.offset * 2);
if (to >= this.pagination.last_page) {
to = this.pagination.last_page;
}
var pagesArray = [];
while (from <= to) {
pagesArray.push(from);
from++;
}
return pagesArray;
}
},
ready : function(){
this.getUsers(this.pagination.current_page);
},
methods : {
getUsers: function(page){
this.$http.get('/user/api?page='+page).then((response) => {
this.$set('pagination', response.data);
});
},
changePage: function (page) {
this.pagination.current_page = page;
this.getUsers(page);
}
}
})
Vue.component('vue-pagination', VueComponent);
new Vue({
el: '#users',
data: {
users: [],
pagination: {
total: 0,
per_page: 2,
from: 1,
to: 0,
current_page: 1
},
offset: 4,
},
ready : function(){
this.getUsers(this.pagination.current_page);
},
methods : {
getUsers: function(page){
this.$http.get('/user/api?page='+page).then((response) => {
this.$set('users', response.data.data);
});
},
}
});Как заставить эту разбивку на страницы работать с vue js при использовании компонента vue Пожалуйста, помогите мне.
