VueJS: How to make v-for to display 10 items per page?

Question

I have a questionnaire with 60 questions, and I need to display 10 questions at a time.

But, I'm having trouble making it work even though I see some references on the internet.

The way I am doing, each time I click next(), 10 items are added to the v-for, but the previous 10 items remain on the page.

I'm doing this:

<div class="test-questions comp">
                    <div class="question" v-for="q in perguntas['questions']" v-if="q.id <= perpage">
                        <div class="statement">
                            {{q.id}}. {{q.text}}
                        </div>
                        <div class="options yes-no">
                            <div class="caption option yes">Sim</div>
                            <div class="caption option no">Não</div>
                        </div>
                    </div>
                  
                </div>
                <div class="action-row">
                    <button v-if="perpage == 60" @click="salvarRelato()"><span>Publicar</span></button>
                    <button v-if="perpage < 50" @click="previous()"><span>Anterior</span></button>
                    <button v-if="perpage < 50" @click="next()"><span>Próximo</span></button>
                </div>

My data:

props: ['perguntas'],
        data(){
            return {
                perpage: 10,
            }
        },
        methods: {
            next(){
                this.perpage = this.perpage + 10;
            },
            previous(){
        this.perpage = this.perpage - 10;
            },
        }

Can you help me ?

Boussadjra Brahim · Accepted Answer · 2020-09-27 16:04:22Z

2

You should add another property called pageNumber initialized by 1, then use another one defined as computed property called currentPageItems based on pageNumber and perPage then loop through the currentPageItems:

props: ['perguntas'],
        data(){
            return {
                perpage: 10,
                pageNumber:0
            }
        },
      computed:{
        currentPageItems(){
          return this.perguntas.slice(this.pageNumber*this.perpage,this.pageNumber*this.perpage+1+this.perpage)
        }
         }
        methods: {
            next(){
                this.pageNumber++;
            },
            previous(){
           this.pageNumber--;
            },
        }

template :

   v-for="q in currentPageItems"

answered Sep 27, 2020 at 16:04

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Basit · Accepted Answer · 2020-09-27 16:26:11Z

You can keep an array for questions that need to be rendered and the fill the array with 5 questions whenever loadnext() method is fired which will empty old questions and fill the array with new like this.

Check this out for Live Demo

Vue Markup :

<template>
   <div id="app">
      <div v-for="item in toRender" :key="item" > {{ item.name }} </div>
      <button @click="loadnext()">next</button>
   </div>
</template>

Vue <script> :

data: () => ({
  start: 0, // Lower limit 
  end: 5, // Upper Limit
  questions: [], // Array containing all the questions.
  toRender: [] // Array containing questions that need to be rendered. 
}),

mounted() {
  for (let i = this.start; i < this.end; i++){
    this.toRender.push(this.questions[i])
  }
  this.start = this.start + this.toRender.length;
  this.end =  this.start + this.toRender.length;
}

methods: {
  loadnext() {
    this.toRender = [];
      for (let i = this.start; i < this.end; i++){
        this.toRender.push(this.questions[i])
      }
   }
 }

Gursewak Singh · Accepted Answer · 2020-09-27 16:11:51Z

0

Why don't you try to keep two arrays (primary, secondary), whenever next() method is called, you get the 10 tracked items from primary arrays and append it to the secondary array. And use v-for on the secondary array to get the all items (previous and the appended ones).

There must be better way to do that, but for time being I can only suggest you this solution.

edited Sep 27, 2020 at 16:11

answered Sep 27, 2020 at 16:03

Gursewak Singh

8321 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

VueJS: How to make v-for to display 10 items per page?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related