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

【问题标题】：vue-paginate load nested array vue.jsvue-paginate 加载嵌套数组 vue.js
【发布时间】：2017-09-28 05:52:11
【问题描述】：

我正在尝试使用来自 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”未在“分页”数组中注册。（在根实例中找到）vue-paginate.js:21:6 [Vue 警告]：无效的道具：道具“列表”的类型检查失败。预期数组，得到对象。（在组件中找到）

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

谢谢

【问题讨论】：

标签： javascript arrays pagination vue.js vuejs2

【解决方案1】：

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

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

这是一个有效的example。

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

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

【讨论】：

没想到计算属性！真是简单又好办法。谢谢！！！
在每个新页面中，问题的索引再次从 0 开始。有什么方法可以让新页面中每个问题的索引继续增加？
我想将响应保存在数组响应 [] 中，并且通过此实现，它正在替换例如我在第 1 页的第 1 个问题中选择的响应 [0] 以及第 2 页的第 1 个问题的响应等。如果例如有 70 个问题，我将它们分页（每页 5 个），如何将它们一个接一个地存储在数组响应 [69] 中？当我在每个广播组中选择问题的响应时，我使用 v-model: "responses[index]"。
@linous index 通常是在 Vue 中引用数组中的事物的一种非常糟糕的方式，正是出于这个原因。索引发生变化。在每个问题上使用id 属性并将id 存储在您的回复中。或者将响应存储在问题本身中。