javascript - 当您不知道会有多少嵌套 JSON 对象时，如何为每个级别生成一个 Vue 组件？

Question

我有一些包含零售商列表的 JSON 数据，其中一些零售商拥有可以深入多个级别的子零售商。

我想使用 Vue 生成标记，以显示父零售商，然后显示其下方的嵌套子零售商，类似于此:

我想创建一个函数来容纳与 JSON 中一样多的嵌套零售商。这是 JSON 的样子:

    [{
      "RetailerChilderen":[

      ],
      "Id":83107,
      "Name":"10-11",
      "HasInsightsCenter":true,
      "ParentId":0,
      "UserSelected":true,
      "UserHasAccess":true,
      "Letter":"#",
      "IsVisible":true,
      "InDepthLevel":0
   },
   {
      "RetailerChilderen":[

      ],
      "Id":82800,
      "Name":"1-800-Flowers.com",
      "HasInsightsCenter":false,
      "ParentId":0,
      "UserSelected":true,
      "UserHasAccess":true,
      "Letter":"#",
      "IsVisible":true,
      "InDepthLevel":0
   },
   {
      "RetailerChilderen":[
         {
            "RetailerChilderen":[
               {
                  "RetailerChilderen":[

                  ],
                  "Id":82371,
                  "Name":"Hervis Sports",
                  "HasInsightsCenter":false,
                  "ParentId":82247,
                  "UserSelected":false,
                  "UserHasAccess":false,
                  "Letter":null,
                  "IsVisible":true,
                  "InDepthLevel":0
               }
            ],
            "Id":82247,
            "Name":"Spar Austria",
            "HasInsightsCenter":false,
            "ParentId":648,
            "UserSelected":false,
            "UserHasAccess":false,
            "Letter":null,
            "IsVisible":true,
            "InDepthLevel":0
         },
         {
            "RetailerChilderen":[
               {
                  "RetailerChilderen":[

                  ],
                  "Id":655,
                  "Name":"Despar Italy",
                  "HasInsightsCenter":false,
                  "ParentId":83095,
                  "UserSelected":false,
                  "UserHasAccess":false,
                  "Letter":null,
                  "IsVisible":true,
                  "InDepthLevel":0
               },
               {
                  "RetailerChilderen":[

                  ],
                  "Id":82250,
                  "Name":"Spar Slovenia",
                  "HasInsightsCenter":false,
                  "ParentId":83095,
                  "UserSelected":false,
                  "UserHasAccess":false,
                  "Letter":null,
                  "IsVisible":true,
                  "InDepthLevel":0
               },
               {
                  "RetailerChilderen":[

                  ],
                  "Id":82370,
                  "Name":"Spar Hungary",
                  "HasInsightsCenter":false,
                  "ParentId":83095,
                  "UserSelected":false,
                  "UserHasAccess":false,
                  "Letter":null,
                  "IsVisible":true,
                  "InDepthLevel":0
               },
               {
                  "RetailerChilderen":[

                  ],
                  "Id":82374,
                  "Name":"Spar Croatia",
                  "HasInsightsCenter":false,
                  "ParentId":83095,
                  "UserSelected":false,
                  "UserHasAccess":false,
                  "Letter":null,
                  "IsVisible":true,
                  "InDepthLevel":0
               }
            ],
            "Id":83095,
            "Name":"SPAR ASPIAG",
            "HasInsightsCenter":false,
            "ParentId":648,
            "UserSelected":false,
            "UserHasAccess":false,
            "Letter":null,
            "IsVisible":true,
            "InDepthLevel":0
         }
      ],
      "Id":648,
      "Name":"Spar International",
      "HasInsightsCenter":true,
      "ParentId":0,
      "UserSelected":false,
      "UserHasAccess":false,
      "Letter":"S",
      "IsVisible":true,
      "InDepthLevel":0
   },
   {
      "RetailerChilderen":[

      ],
      "Id":860,
      "Name":"36.6 (Pharmacy)",
      "HasInsightsCenter":false,
      "ParentId":0,
      "UserSelected":false,
      "UserHasAccess":false,
      "Letter":"#",
      "IsVisible":true,
      "InDepthLevel":0
   },
   {
      "RetailerChilderen":[

      ],
      "Id":82926,
      "Name":"Ace Hardware Indonesia",
      "HasInsightsCenter":false,
      "ParentId":0,
      "UserSelected":false,
      "UserHasAccess":false,
      "Letter":"A",
      "IsVisible":true,
      "InDepthLevel":0
   }]

现在在代码中，我只循环遍历两个级别，即通过 Vue 中的标记:

<ul class="item-container">
    <li v-for="item in retailers">

        <div class="item-info">
            <span>{{ item.Name }}</span>
        </div>

        <ul v-if="item.RetailerChilderen.length">
            <li v-for="subItem in item.RetailerChilderen">
                <div class="item-info">
                    <span>{{ subItem.Name }}</span>
                </div>
            </li>
        </ul>

    </li>
</ul>

使用由方法生成的 Vue 模板是否是允许在 DOM 中显示多层嵌套 JSON 的正确方法？

Answer 1

您可以像操作节点及其子节点一样使用递归组件。

  const RetailerRec = Vue.component('RetailerRec', {
    props: ['retailer'],
    template: `
      <ul>
        <li> <input type="checkbox"/> {{retailer.Name}} </li>

        <template v-for="retailer in retailer.RetailerChilderen">
          <RetailerRec :retailer="retailer"/>
        </template>
      </ul>
    `
  })
  const tree = JSON.parse('[{"RetailerChilderen":[],"Id":83107,"Name":"10-11","HasInsightsCenter":true,"ParentId":0,"UserSelected":true,"UserHasAccess":true,"Letter":"#","IsVisible":true,"InDepthLevel":0},{"RetailerChilderen":[],"Id":82800,"Name":"1-800-Flowers.com","HasInsightsCenter":false,"ParentId":0,"UserSelected":true,"UserHasAccess":true,"Letter":"#","IsVisible":true,"InDepthLevel":0},{"RetailerChilderen":[{"RetailerChilderen":[{"RetailerChilderen":[],"Id":82371,"Name":"Hervis Sports","HasInsightsCenter":false,"ParentId":82247,"UserSelected":false,"UserHasAccess":false,"Letter":null,"IsVisible":true,"InDepthLevel":0}],"Id":82247,"Name":"Spar Austria","HasInsightsCenter":false,"ParentId":648,"UserSelected":false,"UserHasAccess":false,"Letter":null,"IsVisible":true,"InDepthLevel":0},{"RetailerChilderen":[{"RetailerChilderen":[],"Id":655,"Name":"Despar Italy","HasInsightsCenter":false,"ParentId":83095,"UserSelected":false,"UserHasAccess":false,"Letter":null,"IsVisible":true,"InDepthLevel":0},{"RetailerChilderen":[],"Id":82250,"Name":"Spar Slovenia","HasInsightsCenter":false,"ParentId":83095,"UserSelected":false,"UserHasAccess":false,"Letter":null,"IsVisible":true,"InDepthLevel":0},{"RetailerChilderen":[],"Id":82370,"Name":"Spar Hungary","HasInsightsCenter":false,"ParentId":83095,"UserSelected":false,"UserHasAccess":false,"Letter":null,"IsVisible":true,"InDepthLevel":0},{"RetailerChilderen":[],"Id":82374,"Name":"Spar Croatia","HasInsightsCenter":false,"ParentId":83095,"UserSelected":false,"UserHasAccess":false,"Letter":null,"IsVisible":true,"InDepthLevel":0}],"Id":83095,"Name":"SPAR ASPIAG","HasInsightsCenter":false,"ParentId":648,"UserSelected":false,"UserHasAccess":false,"Letter":null,"IsVisible":true,"InDepthLevel":0}],"Id":648,"Name":"Spar International","HasInsightsCenter":true,"ParentId":0,"UserSelected":false,"UserHasAccess":false,"Letter":"S","IsVisible":true,"InDepthLevel":0},{"RetailerChilderen":[],"Id":860,"Name":"36.6 (Pharmacy)","HasInsightsCenter":false,"ParentId":0,"UserSelected":false,"UserHasAccess":false,"Letter":"#","IsVisible":true,"InDepthLevel":0},{"RetailerChilderen":[],"Id":82926,"Name":"Ace Hardware Indonesia","HasInsightsCenter":false,"ParentId":0,"UserSelected":false,"UserHasAccess":false,"Letter":"A","IsVisible":true,"InDepthLevel":0}]')
  
  new Vue({
    components: { RetailerRec },
    data () {
      return { tree }
    },
    template: `<div>
      <RetailerRec v-for="retailer in tree" :retailer="retailer" :key="retailer.Id"/>
    </div>`,
    el: '#app'
  })

li{
  list-style-type:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>