vue-paginate load nested array vue.js

Question

I'm trying to use the vue-paginate component from https://www.npmjs.com/package/vue-paginate .

I want to create pagination for the questions I load from firebase. The declaration is here:

new Vue({
  el: '#app',
  data: {
    quiz: {
      questions: [],
      answers: [],
      title: ''
    },
paginate: ['questions']
    }

Questions are in this form:

questions" : [ {
    "q_options" : [ "Yes", "No", "Don't know" ],
    "q_text" : "My organisation blah blah", 
     ...
  },{
    "q_options" : [ "Yes", "Maybe", "Don't know" ],
    "q_text" : " blah blah", 
     ...
  }]

And I'm calling it like this in the template:

    <paginate name="quiz" :list="quiz" :per="2">
  <li v-for="(quest,index) in paginated('quiz.questions')">
    {{ quest.q_text }}
  </li>
</paginate>

So, I'm getting the following errors: [vue-paginate]: 'quiz.questions' is not registered in 'paginate' array. (found in root instance) vue-paginate.js:21:6 [Vue warn]: Invalid prop: type check failed for prop "list". Expected Array, got Object. (found in component )

How should I add/register the quiz.questions in the paginate('') array?

Thank you

Bert · Accepted Answer · 2017-04-30 16:33:10Z

2

Use a computed to expose the questions outside of the quiz.

new Vue({
  el: "#app",
  data: {
    quiz: {
      questions,
      answers: [],
      title: ""
    },
    paginate: ["questions"]
  },
  computed:{
    questions(){
      return this.quiz.questions
    }
  }
});

Here is a working example.

Additionally, list in the paginate component needs to be an array. You cannot tie it to your quiz object. I modified the template to look like this:

<paginate name="questions" :list="questions" :per="1">
  <li v-for="(quest,index) in paginated('questions')">
    {{ quest.q_text }}
  </li>
</paginate>

answered Apr 30, 2017 at 16:33

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

4 Comments

linous Over a year ago

Didn't think about the computed property! Really simple and good way. Thank you!!!

linous Over a year ago

In each new page, the index for the questions starts at 0 again. Is there any way that the index of every question in a new page to just continue to increment?

linous Over a year ago

I want to save the responses in an array responses[] and with this implementation, it's replacing e.g. the responses[0] that I selected in the 1st question of the 1st page with the response of the 1st question of the 2nd page, etc. If e.g. there are 70 questions, I paginate them (5 in each page), how would I be able to store them in the array responses[69] one after the other? I use v-model: "responses[index]" when I select a response of a question in every radio group.

Bert Over a year ago

@linous index is generally a very bad way to reference things in arrays in Vue for precisely this reason. Indexes change. Use an id property on each question and store the id in your response. Or store the response in the question itself.

Collectives™ on Stack Overflow

vue-paginate load nested array vue.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related