3
我使用Laravel和Vue Js進行數據列表和使用vue組件進行分頁數據，而不使用組件我的代碼工作正常，但是當我使用組件分頁欄時，與上市同步，如何使用Laravel和Vue進行自定義分頁組件Js
這裏是我的HTML
<!DOCTYPE html>
<html>
<head>
\t <title>Users List</title>
\t <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
</head>
<body>
\t <div class="container" id="users">
\t \t <!-- Item Listing -->
\t \t <table class="table table-bordered">
\t \t \t <tr>
\t \t \t \t <th>Name</th>
\t \t \t \t <th>Email</th>
\t \t \t \t <th>Created At</th>
\t \t \t </tr>
\t \t \t <tr v-for="user in users">
\t \t \t \t <td>@{{ user.name }}</td>
\t \t \t \t <td>@{{ user.email }}</td>
\t \t \t \t <td>@{{ user.created_at }}</td>
\t \t \t </tr>
\t \t </table>
\t \t <vue-pagination></vue-pagination>
\t </div>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
\t <script type="text/javascript" src="https://cdn.jsdelivr.net/vue.resource/0.9.3/vue-resource.min.js"></script>
\t <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(){
\t \t 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組件請幫我在如何使VUE JS這個拼版作業。
這可能有助於https://dotdev.co/simple-vue-js-pagination-with-laravel-33b7cfbb5ccc#.n6tyt3s91 –
另請參閱https://www.npmjs.com/package/vue-laravel-分頁 –
謝謝你的回覆@KhorshedAlam我正在努力 –