vue.jsで上記のようなページングの表示について

でまた新たな疑問点ができました。
HTMLなどは下記のようになります。

html
1        <table class="table table-bordered font-small">
2            <tr><th colspan="1">KEY</th><th colspan="1">VALUE</th></tr>
3            <tr  v-for="values in dipsItems">
4                <td  v-for="value in values">{{ value }}</td>
5            </tr>
6        </table>
7        <div id="pagination">
8            <ul class="pagination">
9                <li v-on:click="showFirst" class="[isStartPage ? 'disabled' : '']"><a>&laquo;</a></li>
10                <li v-on:click="showPrev" class="[isStartPage ? 'disabled' : '']"><a>&lt;</a></li>
11                <li v-on:click="showPage(index)" v-bind:class="{ active: page == index }"  v-for="index in pageCount"  v-if="index -4 <= page && index +4 >= page"><a>{{index + 1}}</a></li>
12                <li v-on:click="showNext" class="[isEndPage ? 'disabled' : '']"><a>&gt;</a></li>
13                <li v-on:click="showLast" class="[isEndPage ? 'disabled' : '']"><a>&raquo;</a></li>
14            </ul>
15        </div>

js
1    	var vm =  new Vue({
2        el: '.demo',
3        data: {
4            page: 0,
5            dispItemSize: 10,
6            index : '0',
7            [
8            	{key: '1', value: 'value1'},
9            	{key: '2', value: 'value2'},
10            	{key: '3', value: 'value3'},
11            	{key: '4', value: 'value4'},
12            	{key: '5', value: 'value5'},
13            	{key: '6', value: 'value6'},
14            	{key: '7', value: 'value7'},
15            	{key: '8', value: 'value8'},
16            	{key: '9', value: 'value9'},
17            	{key: '10', value: 'value10'}
18            	～
19            	{key: '1000', value: 'value1000'}
20            	
21        	],
22        },       
23		methods: {
24			showFirst: function() {
25                this.page = 0;
26            },
27            showPrev: function() {
28                if (this.isStartPage) return;
29                    this.page--;
30            },
31            showNext: function() {
32                if (this.isEndPage) return;
33                    this.page++;
34            },
35            showLast: function(index) {
36                this.page = Math.floor((this.data.length - 1) / this.dispItemSize);
37                //this.page = this.pageCount - 2;
38            },
39            showPage: function(index) {
40                this.page = index;
41            },
42        },
43        computed:{
44            dipsItems: function() {
45                var startPage = this.page * this.dispItemSize;
46                return this.data.slice(startPage, startPage + this.dispItemSize);
47            },
48            isStartPage: function(){
49                return (this.page == 0);
50            },
51            isEndPage: function(){
52                return ((this.page + 1) * this.dispItemSize >= this.data.length);
53            },
54            pageCount: function() {
55                return Math.floor(this.data.length / this.dispItemSize);
56            },
57        },

上記のようなロジックを組むと、100ページ目などは下記のように表示されます。
« < 96 97 98 99 100 101 102 103 104 > »

1ページ目は下記のように表示されます。
« < 1 2 3 4 5 > »

最終ページは下記のように表示されます。

« < 853 854 855 856 > »

ページの表記について前ページ9ページづつなどうまく表記する方法はありますでしょうか？

karamarimo

2017/10/23 09:29

「ページの表記について前ページ9ページづつなどうまく表記する方法」とは具体的にどういうことでしょうか。

gomengo

2017/10/23 11:23 編集

今のままだと、1ページ目を開いている時は、5ページ分のpaginationしか出ず、最終ページでも5ページ分のpaginationしかでない状況です。 2ページ目は、5ページ分のpaginationが出ます。これをどのページを開いていても同じ数のpaginationが出るようにしたいと思いました。 v-for="index in pageCount"をいじらないとダメなのかと思っています。ちなみにこれは、v-forで整数から整数までの範囲指定でループを回すのは、どのようにやるのでしょうか。本当に申し訳ありません。