質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1402閲覧

Vue.jsでのページナビゲーション(ページネーション)について

gomengo

総合スコア51

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/10/23 02:57

下記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>&laquo;</a></li> 4 <li v-on:click="showPrev" class="[isStartPage ? 'disabled' : '']"><a>&lt;</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>&gt;</a></li> 7 <li v-on:click="showLast" class="[isEndPage ? 'disabled' : '']"><a>&raquo;</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のでしょうか、どこかに参考となる記載はありますでしょうか?
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

  • 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">.

attribute内での補間機能は削除された、つまり <# ***="{{~~~}}"> というのは使えないということです。
代わりにv-bindをつかってv-bind:class="page == $index ? 'active': ''"とするか、もしくはオブジェクトを使ってv-bind:class="{ active: page == $index }"としましょう。

後者のはこちらを参考に
https://jp.vuejs.org/v2/guide/class-and-style.html

  • invalid expression: Unexpected token : in
data: dipsItems

Raw expression: v-repeat="data: dipsItems"

angularじゃないのでv-repeat="data: dipsItems"ではなくv-for="data in dipsItems"です。

###追記

また、v-repeatが使用できない場合、v-forでどのように代替するのでしょうか。

lang

1<li v-on:click="showPage($index)" class="{{page == $index ? 'active': ''}}" v-repeat="pageCount"><a>{{$index + 1}}</a></li>

ここのことをおっしゃっているんだと思いますが、

v-repeatというのは vue には存在しません...と思ったらver 0.*にはあったんですね。$indexも使えたようです。
とりあえず ver 2 にv-repeatは存在しません。

代わりに、Rangeによるv-forを使えばいいと思います。

v-for with a Range

今の場合こうするといいと思います。

lang

1<li v-for="index in pageCount" v-on:click="showPage(index)" class="{{page == index ? 'active': ''}}"><a>{{index + 1}}</a></li>

この場合、indexdataで宣言する必要はありません(というかしないほうがいいです)。

投稿2017/10/23 03:14

編集2017/10/23 04:25
karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gomengo

2017/10/23 04:03

上記の部分を修正すると下記のようなエラーが出ます。 vue.js:577 [Vue warn]: Property or method "$index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in <Root>) warn @ vue.js:577 warnNonPresent @ vue.js:1851 has @ vue.js:1885 (anonymous) @ VM321:2 Vue._render @ vue.js:4385 updateComponent @ vue.js:2694 get @ vue.js:3035 Watcher @ vue.js:3024 mountComponent @ vue.js:2698 Vue$3.$mount @ vue.js:8217 Vue$3.$mount @ vue.js:10531 Vue._init @ vue.js:4477 Vue$3 @ vue.js:4562 (anonymous) @ expense_master_vue.html:227 vue.js:577 [Vue warn]: Property or method "$index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in <Root>) warn @ vue.js:577 warnNonPresent @ vue.js:1851 has @ vue.js:1885 (anonymous) @ VM321:2 Vue._render @ vue.js:4385 updateComponent @ vue.js:2694 get @ vue.js:3035 Watcher @ vue.js:3024 mountComponent @ vue.js:2698 Vue$3.$mount @ vue.js:8217 Vue$3.$mount @ vue.js:10531 Vue._init @ vue.js:4477 Vue$3 @ vue.js:4562 (anonymous) @ expense_master_vue.html:227 vue.js:577 [Vue warn]: Failed to resolve directive: repeat (found in <Anonymous>) $indexをdataに定義すると上記のうちの1つめのエラーは消えるのですが、Failed to resolve directive: repeatのエラーがなぜ表示されてしまうのかわかりません。 v-repeatは使用できないということでしょうか? また、v-repeatが使用できない場合、v-forでどのように代替するのでしょうか。 知識不足で申し訳ございません。
gomengo

2017/10/23 04:18

$indexのワーニングは$を削除しindexと表記するとワーニングが消えました。
gomengo

2017/10/23 04:30

<li v-on:click="showPage(index)" v-bind:class="{ active: page == index }" v-for="(item, index) in pageCount"><a>{{index + 1}}</a></li> と修正したら動作しました ありがとうございます。
karamarimo

2017/10/23 04:32

その場合 item と index は同じ値になるので両方いらないと思いますよ。
gomengo

2017/10/23 07:29

ありがとうございます。ご指摘いただいたようにしても動作しました。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問