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

发布时间：2020-12-14 19:40:15 所属栏目：大数据来源：网络整理

导读：我使用Laravel和Vue Js进行数据列表并使用vue组件分页数据,不使用组件我的代码工作正常但是当我使用组件分页栏工作但不与列表同步时, 这是我的Html !DOCTYPE htmlhtmlheadtitleUsers List/titlelink rel="stylesheet" type="text/css" href="https://cdnjs.c

我使用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);
  });

我想,现在您的代码应该按预期工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!