I am trying to make a multidimensional vertical menu with vue.js but the subitems are not appearing

Question

I am trying to make a multidimensional vertical menu with vue.js but the subitems are not appearing

Navigation

#1 by (0 votes)

1

This is the code I have so far:

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><linkhref="https://appstack.bootlab.io/css/app.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script><divclass="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>

The idea is that the menu looks like this:

Itemthatdoesnothavechildrenshouldlooklikethis:

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

When the items have children it should have the data-toggle="collapse" option and look something like this:

<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>#### SUB ITENS ####</li>##
    </ul>
</li>

And the subitems when you do not have any more children should look like this:

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

I think I'm getting close to the result, but the sub items are disappearing, it looks like it does not find the data that should continue the loop.

Can anyone help me? ♥

vue.js vue.js-2

asked by anonymous 02.12.2018 / 20:45

1 answer

Scrollspy does not work Iterate values of two requests in * ngFor

score 0 · Answer 1

So you're doing v-for an object, switch to an array, and the children you want to loop do also.

Type this:

new Vue({
  el: '#vuesadminmenu',
  data: {
    menuitens: [
      {
        titulo: 'Test0',
        open: 'false',
        selected: 'false',
        link: 'http://www.link.com/test0',
        child: '',
      },
      {
        titulo: 'Test1',
        open: 'true',
        selected: 'false',
        link: 'http://www.link.com/test1',
        child: [{
          titulo: 'Test2',
          open: 'true',
          selected: 'false',
          link: 'http://www.link.com/test2',
          child: [{
            titulo: 'Test3',
            open: 'true',
            selected: 'true',
            link: 'http://www.link.com/test3',
            child: '',
          }],
        }],
      },
    ],
  },
});