How to write recursive nested loop in vue.js template?

Question

This is my dataset

{
   "items":[
      {
         "contentType":"h1",
         "items":[
            {
               "contentType":"b",
               "items":[
                  {
                     "contentType":"i",
                     "items":[
                        
                     ],
                     "id":9
                  }
               ],
               "id":6
            }
         ],
         "id":0
      }
   ]
}

And I want to access the items array which could be recursive.

Generally we use v-for loop. But there I've no idea what should I do in the vue.js template block.

<span v-for="(item1,index) in mainData.items" :key="index">
</span>

How do you store your infinite loops data in a js file? or in memory? Makes not much sense, does it? — Patrick Artner
– Patrick Artner, Commented May 22, 2021 at 11:35

Boussadjra Brahim · Accepted Answer · 2024-03-31 03:10:50Z

It looks like you want to render a stuff such as a tree structure with recursive content, for this I suggest the following solution based on this one

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('tree', {
  props: ['item'],
  template: `
<p>
  <span>{{ item.contentType }}</span>
  <tree-item-contents :items="item.items"/>
</p>
`
})

Vue.component('tree-item-contents', {
  props: ['items'],
  template: `<ul>
  <li v-for="child in items">
    <tree v-if="child.items" :item="child"/>
    <span v-else>{{ item.contentType }}</span>
  </li>
</ul>`
})

new Vue({
  el: '#app',

  data() {
    return {
      item: {
        "contentType": "root",
        "items": [{
          "contentType": "h1",
          "items": [{
            "contentType": "b",
            "items": [{
              "contentType": "i",
              "items": [

              ],
              "id": 9
            }],
            "id": 6
          }],
          "id": 0
        }]
      }
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <tree :item="item" />
</div>

Collectives™ on Stack Overflow

How to write recursive nested loop in vue.js template?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related