下記URLを参考にして、vue.jsでページネーションを作成しています。
Vue.js v2.5.2を使用し作成しているのですが、エラーが出てしまいうまくいきません。
vue.jsのバージョンで上記のURLでは若干修正いたしました。
html
1<div id="pagination"> 2 <ul class="pagination"> 3 <li v-on:click="showFirst" class="[isStartPage ? 'disabled' : '']"><a>«</a></li> 4 <li v-on:click="showPrev" class="[isStartPage ? 'disabled' : '']"><a><</a></li> 5 <li v-on:click="showPage($index)" class="{{page == $index ? 'active': ''}}" v-repeat="pageCount"><a>{{$index + 1}}</a></li> 6 <li v-on:click="showNext" class="[isEndPage ? 'disabled' : '']"><a>></a></li> 7 <li v-on:click="showLast" class="[isEndPage ? 'disabled' : '']"><a>»</a></li> 8 </ul> 9 </div> 10 11<ul> 12 <li v-repeat="data: dipsItems">{{data.key}} - {{data.value}}</li> 13</ul> 14
js
1new Vue({ 2 el: '#page-demo', 3 data:{ 4 page: 0, 5 dispItemSize: 3, 6 data: [ 7 {key: '1', value: 'value1'}, 8 {key: '2', value: 'value2'}, 9 {key: '3', value: 'value3'}, 10 {key: '4', value: 'value4'}, 11 {key: '5', value: 'value5'}, 12 {key: '6', value: 'value6'}, 13 {key: '7', value: 'value7'}, 14 {key: '8', value: 'value8'}, 15 {key: '9', value: 'value9'}, 16 {key: '10', value: 'value10'} 17 ] 18 }, 19 methods:{ 20 showFirst: function() { 21 this.page = 0; 22 }, 23 showPrev: function() { 24 if (this.isStartPage) return; 25 this.page--; 26 }, 27 showNext: function() { 28 if (this.isEndPage) return; 29 this.page++; 30 }, 31 showLast: function() { 32 this.page = Math.floor((this.data.length - 1) / this.dispItemSize); 33 }, 34 showPage: function(index) { 35 this.page = index; 36 } 37 }, 38 computed:{ 39 dipsItems: function() { 40 var startPage = this.page * this.dispItemSize; 41 return this.data.slice(startPage, startPage + this.dispItemSize); 42 }, 43 isStartPage: function(){ 44 return (this.page == 0); 45 }, 46 isEndPage: function(){ 47 return ((this.page + 1) * this.dispItemSize >= this.data.length); 48 }, 49 pageCount: function() { 50 return Math.ceil(this.data.length / this.dispItemSize); 51 } 52 } 53});
エラーの内容は、下記のとおりです。
エラーの内容は、下記のとおりです。
class="{{page == $index ? 'active': ''}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
invalid expression: Unexpected token : in
data: dipsItems
Raw expression: v-repeat="data: dipsItems"
バージョンの違いだと思うのですが、v-repeatのでしょうか、どこかに参考となる記載はありますでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/23 04:03
2017/10/23 04:18
2017/10/23 04:30
2017/10/23 04:32
2017/10/23 07:29