如何使用Laravel和Vue Js制作自定义分页组件 - How to make Custom Pagination Component Using Laravel and Vue Js

我使用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>

And this is my Vue Js Code

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组件请帮助我。

没那么复杂。您只是忘记了将当前页面与组件链接起来。为此，只需更改HTML部分

中的代码

<vue-pagination></vue-pagination>

<vue-pagination  :pagination="pagination" v-on:click="getUsers(pagination.current_page)"></vue-pagination>

在你的js代码中，从VueComponent中去掉data函数，并添加分页道具

.....
props: {
        pagination: {
            type: Object,
            required: true
        }
    },
computed: {
    pagesNumber: function () {
        if (!this.pagination.to) {
......

同时，将getUsers方法从VueComposent中移除，并在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);
  });

我想，现在你的代码应该工作如预期