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

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

ただいまの
回答率

90.75%

  • JavaScript

    15229questions

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

  • Vue.js

    571questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 823

gomengo

score 35

下記URLを参考にして、vue.jsでページネーションを作成しています。

リンク内容

Vue.js v2.5.2を使用し作成しているのですが、エラーが出てしまいうまくいきません。

vue.jsのバージョンで上記のURLでは若干修正いたしました。

<div id="pagination">
            <ul class="pagination">
                <li v-on:click="showFirst" class="[isStartPage ? 'disabled' : '']"><a>&laquo;</a></li>
                <li v-on:click="showPrev" class="[isStartPage ? 'disabled' : '']"><a>&lt;</a></li>
                <li v-on:click="showPage($index)" class="{{page == $index ? 'active': ''}}" v-repeat="pageCount"><a>{{$index + 1}}</a></li>
                <li v-on:click="showNext" class="[isEndPage ? 'disabled' : '']"><a>&gt;</a></li>
                <li v-on:click="showLast" class="[isEndPage ? 'disabled' : '']"><a>&raquo;</a></li>
            </ul>
        </div>

<ul>
   <li v-repeat="data: dipsItems">{{data.key}} - {{data.value}}</li>
</ul>
new Vue({
    el: '#page-demo',
    data:{
        page: 0,
        dispItemSize: 3,
        data: [
            {key: '1', value: 'value1'},
            {key: '2', value: 'value2'},
            {key: '3', value: 'value3'},
            {key: '4', value: 'value4'},
            {key: '5', value: 'value5'},
            {key: '6', value: 'value6'},
            {key: '7', value: 'value7'},
            {key: '8', value: 'value8'},
            {key: '9', value: 'value9'},
            {key: '10', value: 'value10'}
        ]
    },
    methods:{
        showFirst: function() {
            this.page = 0;
        },
        showPrev: function() {
            if (this.isStartPage) return;
            this.page--;
        },
        showNext: function() {
            if (this.isEndPage) return;
            this.page++;
        },
        showLast: function() {
            this.page = Math.floor((this.data.length - 1) / this.dispItemSize);
        },
        showPage: function(index) {
            this.page = index;
        }
    },
    computed:{
        dipsItems: function() {
            var startPage = this.page * this.dispItemSize;
            return this.data.slice(startPage, startPage + this.dispItemSize);
        },
        isStartPage: function(){
            return (this.page == 0);
        },
        isEndPage: function(){
            return ((this.page + 1) * this.dispItemSize >= this.data.length);
        },
        pageCount: function() {
            return Math.ceil(this.data.length / this.dispItemSize);
        }
    }
});

エラーの内容は、下記のとおりです。
エラーの内容は、下記のとおりです。

- 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のでしょうか、どこかに参考となる記載はありますでしょうか?
よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

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でどのように代替するのでしょうか。

<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

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

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

`

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/23 13: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でどのように代替するのでしょうか。

    知識不足で申し訳ございません。

    キャンセル

  • 2017/10/23 13:18

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

    キャンセル

  • 2017/10/23 13:30

    <li v-on:click="showPage(index)" v-bind:class="{ active: page == index }" v-for="(item, index) in pageCount"><a>{{index + 1}}</a></li>
    と修正したら動作しました

    ありがとうございます。

    キャンセル

  • 2017/10/23 13:32

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

    キャンセル

  • 2017/10/23 16:29

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

    ありがとうございます!

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15229questions

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

  • Vue.js

    571questions

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