Блог

Главная - Вопросы по программированию - Как написать рекурсивный вложенный цикл в vue.js шаблон?

Как написать рекурсивный вложенный цикл в vue.js шаблон?

#loops #vue.js #recursion #arraylist #nested-loops

Вопрос:

Это мой набор данных

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

И я хочу получить доступ к массиву элементов, который может быть рекурсивным.

Обычно мы используем v-образный цикл. Но там я понятия не имею, что мне делать в vue.js блок шаблонов.

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

Комментарии:

1. Как вы храните данные о бесконечных циклах в файле js? или в памяти? В этом нет особого смысла, не так ли?

2. Я сохранил свои данные в vuex.

Ответ №1:

Похоже, вы хотите визуализировать такие вещи, как древовидная структура с рекурсивным контентом, для этого я предлагаю следующее решение, основанное на этом

 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>
Метки: