how to make a conditional multilevel menu with vue.js?

Question

######################## EDIT ########################

According to @Criss's answer, the method did not work, because the child item is different from the parent item.

A simple item without child should look like this:

<li class="sidebar-item">
    <a class="sidebar-link" href="/test.html">
        <span class="align-middle">Test</span>
    </a>
</li>

When an item has a child it should have the option data-toggle="collapse"

<li class="sidebar-item">
    <a class="sidebar-link" href="/test.html" data-toggle="collapse" >
        <span class="align-middle">Test</span>
    </a>
    <ul class="sidebar-dropdown list-unstyled collapse">
        ##<li>#### CHILD ITENS ####</li>##
    </ul>
</li>

And the subitems when they do not have more childs should look like this:

<li class="sidebar-item">
    <a class="sidebar-link" href="/test3.html">Test3</a>
</li>

my new attempt based on @Criss's response, went like this:

Vue.component('menu-item', {
    props: ['cmitens'],
    template: '#menu-item'
});
new Vue({el: '#vuesadminmenu', 
            data: {
             menuitens: {"test0":{"titulo":"Test0","open":"false","selected":"false","link":"http:\/\/www.link.com\/test0","child":""},"test1":{"titulo":"Test1","open":"true","selected":"false","link":"http:\/\/www.link.com\/test1","child":{"test2":{"titulo":"Test2","open":"true","selected":"false","link":"http:\/\/www.link.com\/test2","child":{"test3":{"titulo":"Test3","open":"true","selected":"true","link":"http:\/\/www.link.com\/test3","child":""}}},"test4":{"titulo":"Test4","open":"false","selected":"false","link":"http:\/\/www.link.com\/test4","child":""}}},"test5":{"titulo":"Test5","open":"false","selected":"false","link":"http:\/\/www.link.com\/test5","child":{"test6":{"titulo":"Test6","open":"false","selected":"false","link":"http:\/\/www.link.com\/test6","child":""}}},"test7":{"titulo":"Test7","open":"false","selected":"false","link":"http:\/\/www.link.com\/test7","child":""}}
            }
       });

ol ol, ol ul, ul ol, ul ul { margin-left: 20px; }

<script src="https://appstack.bootlab.io/js/app.js"></script>
    <link href="https://appstack.bootlab.io/css/app.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    <div class="wrapper">
    <nav class="sidebar">
        <div class="sidebar-content">
            <ul id="vuesadminmenu" class="sidebar-nav">
            <template id="menu-item">
                <li class="sidebar-item" v-for="(mitem, mkey) in menuitens" v-bind:class="[(mitem.open == 'true') ? 'active' : '']">
                    <a class="sidebar-link" v-bind:href="mitem.child !== '' ? '#'+mkey : mitem.link" :data-toggle="[(mitem.child !== '') ? 'collapse' : '']" v-bind:class="[(mitem.open == 'true') ? '' : 'collapsed']">
                        <span class="align-middle">{{mitem.titulo}} {{mitem.open}}</span>
                    </a>
                    <ul class="sidebar-dropdown list-unstyled collapse" v-if="mitem.child !== ''" v-bind:class="[(mitem.open == 'true') ? 'show' : '']">
                        <menu-item :cmitens="mitem.child"></menu-item>
                    </ul>
                </li>
            </template> 
            </ul>
        </div>
    </nav>
    </div>

But the subitems are still disappearing.

---

######################## QUESTION ########################

I try to make a multilevel menu

In vue.js I only get the first level. I have no idea how to do the loop for all levels, and treat the conditions of when it is a fixed item or item with child.

I'm trying to do so:

--> moved to the above edition <--

I have this multidimensional json

{"test0":{"titulo":"Test0","open":"false","selected":"false","link":"\/test0.html","child":""},
 "test1":{"titulo":"Test1","open":"false","selected":"false","link":"\/test1.html"","child":{
    "test2":{"titulo":"Test2","open":"false","selected":"false","link":"\/test2.html"","child":{
        "test3":{"titulo":"Test3","open":"false","selected":"false","link":"\/test3.html"","child":""}}},
    "test4":{"titulo":"Test4","open":"false","selected":"false","link":"\/test4.html"","child":""}}},
 "test5":{"titulo":"Test5","open":"false","selected":"false","link":"\/test5.html"","child":{
    "test6":{"titulo":"Test6","open":"false","selected":"false","link":"\/test6.html"","child":""}}},
 "test7":{"titulo":"Test7","open":"false","selected":"false","link":"\/test7.html"","child":""}}

I'd like to do something like this:

ol ol, ol ul, ul ol, ul ul {
    margin-left: 20px;
}

<script src="https://appstack.bootlab.io/js/app.js"></script>
<link href="https://appstack.bootlab.io/css/app.css" rel="stylesheet"/>
<div class="wrapper">
<nav class="sidebar">
    <div class="sidebar-content">
        <ul class="sidebar-nav">
            <li class="sidebar-item">
                <a class="sidebar-link" href="/test0.html">
                    <span class="align-middle">Test0</span>
                </a>
            </li>
            <li class="sidebar-item active">
                <a href="/test1.html" data-toggle="collapse" class="sidebar-link">
                    <i class="align-middle" data-feather="layout"></i> <span class="align-middle">Test1</span>
                </a>
                <ul class="sidebar-dropdown list-unstyled collapse show">
                    <li class="sidebar-item active">
                        <a href="/test2.html" data-toggle="collapse" class="sidebar-link">
                            <i class="align-middle" data-feather="layout"></i> <span class="align-middle">Test2</span>
                        </a>
                        <ul class="sidebar-dropdown list-unstyled collapse show">
                            <li class="sidebar-item">
                                <a class="sidebar-link" href="/test3.html">Test3</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="sidebar-item">
                <a class="sidebar-link" href="/test4.html">
                    <span class="align-middle">Test4</span>
                </a>
            </li>
        </ul>
    </div>
</nav>
</div>

Can someone help me how can I do the other levels??

Answer 1

Vue.component('menu-item', {
    props: ['menuitens'],
    template: '<ul class="sidebar-nav">'+
                '<li class="sidebar-item" v-for="(mitem, mkey) in menuitens" v-bind:class="[(mitem.open == \'true\') ? \'active\' : \'\']">'+
                    '<a class="sidebar-link" v-bind:href="mitem.link">'+
                        '<span class="align-middle">{{mitem.titulo}} {{mitem.open}}</span>'+
                    '</a>'+
                    '<menu-item v-if="mitem.child !== \'\'" :menuitens="mitem.child"></menu-item>'+
                '</li>'+
            '</ul>'
});
new Vue({el: '#vuesadminmenu', 
            data: {
             menuitens: {"test0":{"titulo":"Test0","open":"false","selected":"false","link":"http:\/\/www.link.com\/test0","child":""},"test1":{"titulo":"Test1","open":"true","selected":"false","link":"http:\/\/www.link.com\/test1","child":{"test2":{"titulo":"Test2","open":"true","selected":"false","link":"http:\/\/www.link.com\/test2","child":{"test3":{"titulo":"Test3","open":"true","selected":"true","link":"http:\/\/www.link.com\/test3","child":""}}},"test4":{"titulo":"Test4","open":"false","selected":"false","link":"http:\/\/www.link.com\/test4","child":""}}},"test5":{"titulo":"Test5","open":"false","selected":"false","link":"http:\/\/www.link.com\/test5","child":{"test6":{"titulo":"Test6","open":"false","selected":"false","link":"http:\/\/www.link.com\/test6","child":""}}},"test7":{"titulo":"Test7","open":"false","selected":"false","link":"http:\/\/www.link.com\/test7","child":""}}
            }
       });

ol ol, ol ul, ul ol, ul ul { margin-left: 20px; }
ul {
    padding-bottom: 0 !important;
}

<script src="https://appstack.bootlab.io/js/app.js"></script>
    <link href="https://appstack.bootlab.io/css/app.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    <div class="wrapper">
    <nav class="sidebar">
        <div class="sidebar-content" id="vuesadminmenu">
            <menu-item :menuitens="menuitens"></menu-item>
        </div>
    </nav>
    </div>

This works by using recursion - you define a component that holds it's own link and all child links and v-if="menuitem.child" exists, then the component creates a sub-copy of itself.

The beautiful thing about this approach is that you no longer care how deeply nested the child items are.

You should tweak the styling tho...