J'ai un questionnaire avec 60 questions et je dois afficher 10 questions à la fois.

Mais j'ai du mal à le faire fonctionner même si je vois des références sur Internet.

Comme je le fais, chaque fois que je clique sur next(), 10 éléments sont ajoutés au v-for, mais les 10 éléments précédents restent sur la page.

Je fais ça:

<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>

Mes données:

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

Pouvez-vous m'aider ?

0
1001Songs Clips 27 sept. 2020 à 18:52

3 réponses

Meilleure réponse

Vous devez ajouter une autre propriété appelée pageNumber initialisée par 1, puis en utiliser une autre définie comme propriété calculée appelée currentPageItems basée sur pageNumber et perPage puis parcourir le {{X4} }:

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--;
            },
        }

Modèle :

   v-for="q in currentPageItems"
2
Boussadjra Brahim 27 sept. 2020 à 16:04

Pourquoi n'essayez-vous pas de garder deux tableaux (primaire, secondaire), chaque fois que la méthode next () est appelée, vous obtenez les 10 éléments suivis des tableaux primaires et les ajoutez au tableau secondaire. Et utilisez v-for sur le tableau secondaire pour obtenir tous les éléments (précédents et ajoutés).

Il doit y avoir une meilleure façon de faire cela, mais pour le moment, je ne peux que vous suggérer cette solution.

0
Gursewak Singh 27 sept. 2020 à 16:11

Vous pouvez garder un tableau pour les questions qui doivent être rendues et remplir le tableau avec 5 questions chaque fois que la méthode loadnext() est déclenchée, ce qui videra les anciennes questions et remplira le tableau avec de nouvelles comme ceci.

Regardez ceci pour Démo en direct

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])
      }
   }
 } 
2
Mohammad Basit 27 sept. 2020 à 16:26