I am working with JSON data that includes a list of retailers, some of which have subretailers that go multiple levels deep.
My goal is to use Vue to generate markup that will show the parent retailer along with any nested subretailers underneath it, similar to this example:
https://i.sstatic.net/n05Li.png
I need to create a function that can handle any number of nested retailers in the JSON. Here is what the JSON structure looks like:
[{
"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
},
...
Currently, my code only loops through two levels in Vue markup:
<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>
Would using a Vue template generated by a method be the best approach to enable displaying multiple levels of nested JSON in the DOM?