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

Question

我正在使用 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 一起工作请帮助我。

Answer 1

没那么复杂。您只是忘记 link 您的当前页面与您的组件。为此，只需更改 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);
  });

我想，现在您的代码应该可以正常工作了。

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

How to make Custom Pagination Component Using Laravel and Vue Js

php

laravel

vue.js

vue-resource

vue-component