javascript - vue-paginate 加载嵌套数组 vue.js

Question

我正在尝试使用 https://www.npmjs.com/package/vue-paginate 中的 vue-paginate 组件.

我想为从 firebase 加载的问题创建分页。声明在这里:

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

问题是这样的形式:

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", 
     ...
  }] 

我在模板中这样调用它:

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

因此，我收到以下错误:[vue-paginate]:“quiz.questions”未在“paginate”数组中注册。(在根实例中找到)vue-paginate.js:21:6[Vue 警告]:无效的 Prop : Prop “列表”的类型检查失败。预期数组，得到对象。(在组件中找到)

我应该如何在 paginate('') 数组中添加/注册 quiz.questions？

谢谢

Answer 1

使用计算器将问题暴露在测验之外。

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

这是一个有效的 example .

此外，paginate组件中的list需要是一个数组。您不能将它绑定(bind)到您的 quiz 对象。我将模板修改为如下所示:

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