如何在vue.js模板中编写递归嵌套循环？

Question

这是我的数据集

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

我想访问可以递归的 items 数组。

一般我们使用v-for循环。但我不知道我应该在 vue.js 模板块中做什么。

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

Answer 1

看起来你想渲染一些东西，例如具有递归内容的树结构，为此我建议基于此的以下解决方案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>