Best way to do unknown number of nested v-for loops, or how to do while loops in VueJs (is there a "v-while"?) I want to recursively use a Vue component for each item in a multidimensional array, which is a list of topics. For example, Topic 1 can have subtopics 1.1, 1.1.1 and 1.1.2, but topic 2 might have no subtopics at all. (My working code is presented at the bottom)
My Array in Vue's app data is something like:
[
  ['Topic 1', [
    'Topic 1.1', [
       ['Topic 1.1.1', []],
       ['Topic 1.1.2', []]
    ]
  ],
  ['Topic 2', []],
  ['Topic 3', [
    ['Topic 3.1', []],
    ['Topic 3.2', []],
    ['Topic 3.3', []],
    ]
  ]
]

Supposing my component is just a details tag, this is my expected HTML output (borders were added just for clarity):


details &gt; details {
  margin-left: 2em;
  border: 1px solid black;
}
&lt;main id="root"&gt;
&lt;details open&gt;&lt;summary&gt;Topic 1&lt;/summary&gt;
  &lt;details open&gt;&lt;summary&gt;Topic 1.1&lt;/summary&gt;
    &lt;details open&gt;&lt;summary&gt;Topic 1.1.1&lt;/summary&gt;
    &lt;/details&gt;
    &lt;details open&gt;&lt;summary&gt;Topic 1.1.2&lt;/summary&gt;
    &lt;/details&gt;
  &lt;/details&gt;
&lt;/details&gt;
&lt;details open&gt;&lt;summary&gt;Topic 2&lt;/summary&gt;
&lt;/details&gt;
&lt;details open&gt;&lt;summary&gt;Topic 3&lt;/summary&gt;
  &lt;details open&gt;&lt;summary&gt;Topic 3.1&lt;/summary&gt;
  &lt;/details&gt;
  &lt;details open&gt;&lt;summary&gt;Topic 3.2&lt;/summary&gt;
  &lt;/details&gt;
  &lt;details open&gt;&lt;summary&gt;Topic 3.3&lt;/summary&gt;
  &lt;/details&gt;
&lt;/details&gt;
etc.



I can't anticipate all v-for loops I'll use, because I don't know the depth of each topic (i.e., I don't know how many subtopics there are, it depends on each topic and there can be dozens or none at all).
My solution was to use a v-if to check if there are subarrays inside the current array; if there are, a component is created for the subarrays too (and the component's template includes in the end this div with a v-if, so it works recursively).
This works, but looks clunky. So my question is: what is the best way to run a while-loop with Vue (for the cases where I don't know how many for-loops I need to run)? Or is my solution already the best way to approach this?
(I first thought of creating a method, and calling this method in the end to check if there are subarrays and then create components for them basically via JavaScript, but this seems worse than using v-if and adding a v-for for adding components to the subarray items)

Here's my working code:


Vue.component('details-component', {
  template: `&lt;details&gt;&lt;summary&gt; {{ arritem[0] }} &lt;/summary&gt;&lt;div v-if="arritem[1].length"&gt; &lt;div v-for="subitem in arritem[1]"&gt;
    &lt;details-component :arritem="subitem"&gt;&lt;/details-component&gt; &lt;/div&gt;&lt;/details&gt;`,
  props: {
    arritem: {
      type: Array,
      required: true
    }
  }
});

const app = new Vue({
  el: "#root",
  data: {
    arr: [
      ['Topic 1', [
        ['Topic 1.1', [
          ['Topic 1.1.1', []],
          ['Topic 1.1.2', []]
          ]
        ]
      ]],
      ['Topic 2', []],
      ['Topic 3', [
        ['Topic 3.1', []],
        ['Topic 3.2', []],
        ['Topic 3.3', []],
      ]]
    ]
  }
});
details details {
  margin-left: 2em;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

&lt;main id="root"&gt;
  &lt;div v-for="item in arr"&gt;
    &lt;details-component :arritem="item"&gt;&lt;/details-component&gt;
  &lt;/div&gt;
&lt;/main&gt;
There is no v-while, no. You can however use v-for over a computed property (which you can compute using while if you so wish).
Although I don't see a reason to use any while-loop. What you have is a data structure with topics and subtopics of any arbitrary length. Using a recursive component for this, which you have done here, is a good choice.
About the only thing that I would change is to, instead of using arritem[0] and arritem[1], using an object with properties name and children. This can possibly also help you determine if a component has any children or not.