Guide to VueJS: Implementing pagination in v-for to display 10 items on each page

Question

Guide to VueJS: Implementing pagination in v-for to display 10 items on each page

I am struggling with displaying 10 questions at a time from a questionnaire that contains a total of 60 questions.

Despite finding some references online, I am having difficulty getting it to work properly.

The issue I am facing is that when I click on next(), 10 new items are added to the v-for but the previous 10 items still remain on the page.

Here is my current implementation:

<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">Yes</div>
                            <div class="caption option no">No</div>
                        </div>
                    </div>
                  
                </div>
                <div class="action-row">
                    <button v-if="perpage == 60" @click="salvarRelato()"><span>Publish</span></button>
                    <button v-if="perpage < 50" @click="previous()"><span>Previous</span></button>
                    <button v-if="perpage < 50" @click="next()"><span>Next</span></button>
                </div>

This is how I have structured my data:

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

Any assistance would be greatly appreciated!

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Consider incorporating a new attribute named pageNumber, starting with the value of 1. Then, utilize another attribute defined as a computed property known as currentPageItems, which relies on pageNumber and perPage. Proceed to iterate through the currentPageItems:

props: ['queries'],
        data(){
            return {
                perpage: 10,
                pageNumber:0
            }
        },
      computed:{
        currentPageItems(){
          return this.queries.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"

Answer 2

Consider incorporating a new attribute named pageNumber, starting with the value of 1. Then, utilize another attribute defined as a computed property known as currentPageItems, which relies on pageNumber and perPage. Proceed to iterate through the currentPageItems:

props: ['queries'],
        data(){
            return {
                perpage: 10,
                pageNumber:0
            }
        },
      computed:{
        currentPageItems(){
          return this.queries.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"

Answer 3

Answer №2

To efficiently render questions in Vue, you can create an array to store the questions that need to be displayed. Whenever the loadnext() method is triggered, this array can be populated with 5 new questions while clearing out the old ones.

Take a look at this Live Demo

Here's the snippet for Vue markup:

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

And for Vue <script>:

data: () => ({
  start: 0, // Starting index
  end: 5, // Ending index
  questions: [], // Array of all questions
  toRender: [] // Array of questions 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])
      }
   }
 }

Answer 4

To efficiently render questions in Vue, you can create an array to store the questions that need to be displayed. Whenever the loadnext() method is triggered, this array can be populated with 5 new questions while clearing out the old ones.

Take a look at this Live Demo

Here's the snippet for Vue markup:

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

And for Vue <script>:

data: () => ({
  start: 0, // Starting index
  end: 5, // Ending index
  questions: [], // Array of all questions
  toRender: [] // Array of questions 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])
      }
   }
 }

Answer 5

Answer №3

Consider implementing a system with two arrays, primary and secondary, to optimize the retrieval process when using the next() method. Retrieve 10 items from the primary array each time next() is called and add them to the secondary array. Utilize v-for on the secondary array to display all items, including both previous and newly added ones.

While there may be alternative methods for accomplishing this task more efficiently, I can currently only recommend this solution as a temporary measure.

Answer 6

Consider implementing a system with two arrays, primary and secondary, to optimize the retrieval process when using the next() method. Retrieve 10 items from the primary array each time next() is called and add them to the secondary array. Utilize v-for on the secondary array to display all items, including both previous and newly added ones.

While there may be alternative methods for accomplishing this task more efficiently, I can currently only recommend this solution as a temporary measure.

Guide to VueJS: Implementing pagination in v-for to display 10 items on each page

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Vue js template not correctly binding class properties

A guide to creating a reference between two tables using the hasOne method in sequelize.js

What is the process for using the fetch method in React to upload a file?

Even after unsubscribing with mqtt.js, the old listener continues to receive messages

Arranging object arrays according to strings

Is the z-index feature not functioning as anticipated?

Ways to determine if a string or HTML contains repeated consecutive elements

How can I extract a specific value from an array in a JSON object by sorting it?

Having trouble getting the expected transition effects to work with Vue.js

Can we adjust the starting value? Why is the Vee validate not recognizing any updates?

Localhost parcel server failing to refresh

Switching between components in vue.js: A beginner's guide

How can a child value be transferred from a client component to a parent component on the server side?

VueJS: Utilizing multiple components to respond to a single event

Modify the appearance of an element within an array upon selection by comparing it with a separate array

Implementing a function to navigate to a different page using jQuery mobile

Why is access to fetch from the origin localhost blocked by CORS policy, while posting using ajax does not face this issue?

Creating a JavaScript library with TypeScript and Laravel Mix in Laravel

Binding HTML Elements to JavaScript Values

Utilize data from a dynamically loaded component within a parent component in Vue.js