Vue中的嵌套循环答案

【问题标题】：Nested loop in VueVue中的嵌套循环
【发布时间】：2016-10-13 19:57:55
【问题描述】：

我有一个通过 vue 传递的对象的对象，我这样做是为了运行：

 <ul>
    <li v-for="subjects in questions">
        <li v-for="question in subjects">
            @{{ question }}
        </li>
    </li>
</ul>

但我收到此错误：

属性或方法“主题”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。（在根实例中找到）

如何在 vue 中运行嵌套循环？

【问题讨论】：

标签： javascript vue.js nested-loops

【解决方案1】：

举个例子：

var vm = new Vue({
  el: '#app',
  data: {
    questions: [
      {
        subjects: ['question 1.1', 'question 1.2']
      },
      {
        subjects: ['question 2.1', 'question 2.2']
      }
    ]
  }
})

<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="question in questions">
      <ul>
        <li v-for="subject in question.subjects">
          {{ subject }}
        </li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

如何在嵌套中使用索引（不重置）？
啊，我正在寻找通过嵌套循环的迭代，我希望我的结果能输出一个带有一组 li 的 ul。
这个答案迫使您将数据结构化为字典数组。但是如果我的数据是一个数组并且我不能轻易改变呢？

【解决方案2】：

接受的答案解决了作为属性创建的对象内的数组。我正在寻找迭代简单的多维数组，它把我带到了这个页面。因此，也为后代添加该答案：

new Vue({
  el: '#app',
  data: {
    questions: [
      ['test1.1', 'test1.2'],
      ['test2.1', 'test2.2']
    ]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id='app'>

  <ol>
    <li v-for="subjects, index in questions">
      {{ index }}
      <ol type='I'>
        <li v-for="question in subjects">
          {{ question }}
        </li>
      </ol>
    </li>
  </ol>
</div>

IOW，问题中示例的问题是在父 <li/> 内添加了一个裸嵌套 <li/>，而没有子列表分组。

【讨论】：

您的回答很有帮助。关于原始问题的一件事是元素在嵌套 v-for 循环和父 v-for 循环中的命名方式。主题集合中的单一元素可能是“主题”。一系列问题中的单一元素可能是问题。我知道这映射到原始问题的 v-for 循环是如何编写的。