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警告]：无效道具：道具“列表”的类型检查失败。预期的数组，得到了对象。（在组件中找到）

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

谢谢

Answer 1

使用计算器公开测验之外的questions。

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

这是一个有效的example。

此外，list组件中的paginate需要是一个数组。您无法将其绑定到quiz对象。我将模板修改为如下所示：

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

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

1 个答案: