如何使用 Laravel 和 Vue Js 制作自定义分页组件答案

【问题标题】：How to make Custom Pagination Component Using Laravel and Vue Js如何使用 Laravel 和 Vue Js 制作自定义分页组件
【发布时间】：2017-03-20 00:45:40
【问题描述】：

我使用 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组件时如何使这个分页与vue js一起工作请帮助我。

【问题讨论】：

这可能对dotdev.co/…有帮助
另见npmjs.com/package/vue-laravel-pagination
感谢您的回复@KhorshedAlam 我正在努力

标签： php laravel vue.js vue-component vue-resource

【解决方案1】：

没那么复杂。您只是忘记将当前页面与您的组件链接起来。为此，只需更改 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) {
......

另外，从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);
  });

我认为，现在您的代码应该可以按预期工作了。

【讨论】：

对我有帮助，我发现 Props 在 vue js 中很重要。