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

Posted 2023-03-16

【中文标题】如何在 vue.js 模板中编写递归嵌套循环？

【英文标题】：How to write recursive nested loop in vue.js template?

【发布时间】：2021-08-11 09:29:40

【问题描述】：

这是我的数据集

   "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>

【问题讨论】：

如何将无限循环数据存储在 js 文件中？还是在记忆中？没有多大意义，是吗？

我将数据存储在 vuex 中。

【参考方案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>