[解決済み] Vue.jsで12件中1～3件を表示させるには？

質問内容

テーブルの下に、"Showing 1 to 3 of 12 entries"を追加したいのですが、どうすればよいですか？ユーザーが次や前のボタンやページネーションの1234番をクリックすると、"Showing 1 to 3..."を変更したいのですが、どうすればよいでしょうか？これは、テーブルの最初の行と最後の行の番号に依存します。例えば、ユーザーが次または2をクリックすると、次のように表示されます "12エントリの4から6を表示"。私は、ページネーションに "previous 1234 next" の代わりに "previous 123 next" だけを表示したいのです。これは私のjsfiddleです https://jsfiddle.net/wbshyrn2/4/

Showing {{customers.length - 11}} to {{customers.length - 9}} of {{customers.length}} entries

解決方法は？

計算されたプロパティは、開始と終了のインデックスを計算するために使用することができます。

    maxBtns: function(){
      return Math.ceil(this.customers.length / 3) > 3 ? 3 : Math.ceil(this.customers.length / 3);
    },
    positionText: function () {
      var endIndex = this.currentPage * this.perPage,
        startIndex = ((this.currentPage - 1) * this.perPage) + 1;

      return "Showing "+startIndex+ " to "+ (endIndex>this.customers.length? this.customers.length :endIndex)  + " of " + this.customers.length;
    }

最大3つのボタンを表示するには、ボタンのv-forバインディングでcomputedプロパティを使用することができます。

<button class="btn btn-primary btn-sm btn-group toggle float-right" data-toggle="buttons" v-for="num in maxBtns" @click="pagination(num)">{{num}}</button>