Nested loop in Vue

Question

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>

but I am getting this error:

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)

How can I run a nested loop in vue?

score 21 · Accepted Answer · answered Oct 13 '16 at 22:04

21

Here you go with the example:

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>

answered Oct 13 '16 at 22:04

Limon Monte

52,539
45
182
213

1

how use index (without reset) in nested? – Adriano Resende Nov 12 '17 at 20:10
Ahh, I'm looking for iteration through nested loops and I want my result to put out a single ul with a single set of li's. – Vasily Hall Jul 24 '18 at 15:16
1

This answer forces you to structure your data as an array of dictionaries. But what if my data is an array of arrays and I can't change that easily? – etayluz May 26 '21 at 15:15

score 1 · Answer 2 · edited Jan 22 '18 at 18:38

The accepted answer addresses arrays inside objects created as properties. I was looking for iterating simple multi dimensional arrays and it brought me to this page. So adding that answer as well for posterity:

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, the issue with the sample in the question is that there is a naked nested <li/> added inside parent <li/> without a sub-list grouping.

Your answer was helpful. One thing that is urk'ing me about the original question, is the way the element is named in both the nested v-for loop and the parent v-for loop. The singular element out of a collection of subjects would likely be 'subject'. And the singular element out of a collection of questions would likely be question. I know this maps to how the original question's v-for loops were written though. — CaffeinateOften, Jun 23 '18 at 17:17

Nested loop in Vue

2 Answers2

Linked