【Vue.js】ひと塊のデータずつ表示する方法

Vue.js

データのひと塊のみを表示して、次へボタンで次のデータを表示する方法を紹介します。
Vue 2の書き方ですがVue 3でも考え方は同じです。

データのひと塊のみを表示して次へボタンで次のデータを表示する方法

ポイント

  • templateでv-forを設定する
  • sliceを使ってインデックス0番目から1つだけを取り出す
  • メソッドを作成して、それぞれの値を1プラスする

具体例

クイズアプリを想定しています。
slice()メソッドについては、JavaScriptで配列の基本操作まとめを参考にしてみてください。

template

<div
v-show="quiz"
class="quiz-main"
v-for="(element, index) in questions.slice(a,b)"
:key="index">
<!-- 質問 -->
<!-- 選択肢 -->
</div>

data()

a:0, //bと合わせてsliceでページ送り
b:1, //aと合わせてsliceでページ送り

上のように、変数を2つ初期設定します。
インデックス0番目から1つを取り出すので、0と1を初期値としています。

method

// 次へボタン
nextQuestion() {
this.a++;
this.b++;
}

それぞれの値をプラス1していくメソッドを呼び出すことで次のかたまりのデータを取得・表示することができます。

Vue.js

Posted by devsakaso