我使用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,},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组件时使用vue js进行此分页请帮助我.
解决方法
它并不复杂.您只是忘了将当前页面与组件链接.为此,只需在HTML部分中更改代码即可
<vue-pagination></vue-pagination>
至
<vue-pagination :pagination="pagination" v-on:click="getUsers(pagination.current_page)"></vue-pagination>
在你的js代码中,从VueComponent中删除数据函数并添加分页道具
.....
props: {
pagination: {
type: Object,required: true
}
},computed: {
pagesNumber: function () {
if (!this.pagination.to) {
......
另外,从VueComposent中删除getUsers方法,并在Vue主实例中与getUsers方法结合使用
getUsers: function(page){
this.$http.get('/user/api?page='+page).then((response) => {
this.$set('users',response.data.data);
this.$set('pagination',response.data);
});
我想,现在您的代码应该按预期工作.
