I am currently working on implementing the vue-paginate component from this source: https://www.npmjs.com/package/vue-paginate .
My goal is to set up pagination for questions retrieved from firebase. Here is the initial setup:
new Vue({
el: '#app',
data: {
quiz: {
questions: [],
answers: [],
title: ''
},
paginate: ['questions']
}
The structure of the questions looks like this:
questions" : [ {
"q_options" : [ "Yes", "No", "Don't know" ],
"q_text" : "My organization blah blah",
...
},{
"q_options" : [ "Yes", "Maybe", "Don't know" ],
"q_text" : " blah blah",
...
}]
When calling it in the template, I use the following approach:
<paginate name="quiz" :list="quiz" :per="2">
<li v-for="(quest,index) in paginated('quiz.questions')">
{{ quest.q_text }}
</li>
</paginate>
However, I encountered some issues: [vue-paginate]: 'quiz.questions' is not registered in the '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 can I correctly register the quiz.questions in the paginate('') array?
Your assistance would be greatly appreciated.