使用 VueJS 进行表格分页

Question

我想为我的表格进行分页，但是当我运行时，我的数据没有出现任何内容。我很困惑我的代码是错误的，也许这里有人可以帮助我。

var newVue = new Vue({

	el: '#app',

	data: {
		items: [
			{ name: "item #1" }, { name: "item #2" }, { name: "item #3" }, { name: "item #4" },
			{ name: "item #5" }, { name: "item #6" }, { name: "item #7" }, { name: "item #8" },
			{ name: "item #9" }, { name: "item #10" }, { name: "item #11" }, { name: "item #12" }
		],
		
		start: 0,
		limit: 2,
		pagination: null,
		total: 12
	},
	
  computed: {
  	filtered: function(){
  		return this.items.slice(0, this.limit)
  	}
  },
  
	mounted: function() {
		this.limit = parseInt(this.pagination);
	},

	watch: {
		pagination: function() {
			this.limit = parseInt(this.pagination);

			if(this.limit != this.start && this.start > 0)
				this.start = parseInt(this.pagination);
				this.limit = this.start + parseInt(this.pagination);
		}
	},

	methods: {
		paginate: function(direction) {
			if(direction === 'next') {
				this.start += parseInt(this.pagination);
				this.limit += parseInt(this.pagination);
			}
			else if(direction === 'back') {
				this.limit -= parseInt(this.pagination);
				this.start -= parseInt(this.pagination);
			}
		},
	},

	filters: {
		paginate: function(array, start, limit) {
			return array.slice(start, limit);
		}
	}

});

.pager button {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
    color: #337AB7;
    padding: 7px 13px;
    text-align: center;
}

.pager button:hover {
    background: #eee;
    cursor: pointer;
    outline: none;
}

.pager button:disabled {
    background: #eee;
    color: #bbb;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
		<table class="table table-striped table-advance table-table-hover table-bordered">
			<thead>
				<th>Item</th>
			</thead>
			<tbody>
				<tr v-for="item in filtered | paginate">
					<td>{{ item.name }}</td>
				</tr>
			</tbody> 
		</table>

		<div class="row">
			<div class="col-md-12 center">
				<ul class="pager">
				  	<li>
				  		<button @click="paginate('previous')" :disabled="start <= 0">
				  			Previous
				  		</button>
				  	</li>
				  	<li>
				  		<button @click="paginate('next')" :disabled="limit >= total">
				  			Next
				  		</button>
				  	</li>
				</ul>
			</div>
		</div>
	</div>
	<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>

Answer 1

您的代码几乎没有问题，删除这些代码后，您的代码可以正常工作，如fiiddle 中所示。

1. 你不需要| paginate 和v-for 因为filtered 是计算属性，它会给你分页结果

       <tbody>
           <tr v-for="item in filtered | paginate">
               <td>{{ item.name }}</td>
           </tr>
       </tbody> 
   

2. 在filtered 中，您需要在 slice 方法中传递正确的参数。

   computed: {
       filtered: function(){
           return this.items.slice(this.start, this.limit)
       }
   },`