Vue中的嵌套循环 [英] Nested loop in Vue

问题描述

我有一个随vue传递的对象的对象，我正在执行以下操作:

I have an object of objects that I am passing with vue and I am doing this to run:

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

但我收到此错误:

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

Property or method "subjects" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

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

How can I run a nested loop in vue?

推荐答案

在此使用示例:

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>

这篇关于Vue中的嵌套循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！