VueJs recursive infinite v-for loop

user_1995006 0
Viewed 2400

I'm trying to achieve a hierarchy tree where I have a user list and for each of them I set a "senior", so it defines who the senior is. This is how I'm trying to solve the problem:

enter image description here

This is what I'm doing:

data(){
    return{
        users: [{
        id: 1,
        fname: 'Joe',
        lname: 'Smith',
        title: 'Super-Senior',
        senior_id: 0,
       }, {
        id: 2,
        fname: 'Bill',
        lname: 'Simons',
        title: 'Junior-1',
        senior_id: 0,
       }];
    }
},
methods: {
  juniors(senior) {
   return this.users.filter((user) =>
    user.senior_id == senior.id
   );
  }
}

Then the component tree:

<ul>
 <li v-for="chief in juniors(snr_chief)">
  <div class="child mx-1">{{chief.lname}} {{chief.fname}}<br /> <small>{{chief.title}}</small>
  </div>
  <ul>
   <li v-for="second in juniors(chief)">
    <div class="child mx-1">{{second.lname}} {{second.fname}}<br /> <small>{{second.title}}</small>
    </div>
    <ul>
     <li v-for="third in juniors(second)">
      <div class="child mx-1">{{third.lname}} {{third.fname}}<br /> <small>{{third.title}}</small>
      </div>
     </li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

This works perfectly, but of course goes as far as 3 levels down. I actually don't know how many levels deep the user may go.

So the idea is to have a recursive component but I don't know how to implement it. Something like:

<ul>
 <li v-for="chief in juniors(snr_chief)">
  <div class="child mx-1">{{chief.lname}} {{chief.fname}}<br /> <small>{{chief.title}}</small>
  </div>
  <Repeater :juniors="snr_chief" :self="chief" />
 </li>
</ul>
vuejs2 vue.js javascript
1 Answers

function listToTree(data, options) {
          options = options || {};
          var ID_KEY = options.idKey || 'Id';
          var PARENT_KEY = options.parentKey || 'ParentId';
          var CHILDREN_KEY = options.childrenKey || 'Items';

          var item, id, parentId;
          var map = {};
            for(var i = 0; i < data.length; i++ ) { // make cache
            if(data[i][ID_KEY]){
              map[data[i][ID_KEY]] = data[i];
              data[i][CHILDREN_KEY] = [];
            }
          }
          for (var i = 0; i < data.length; i++) {
            if(data[i][PARENT_KEY]) { // is a child
              if(map[data[i][PARENT_KEY]]) // for dirty data
              {
                map[data[i][PARENT_KEY]][CHILDREN_KEY].push(data[i]); // add child to parent
                data.splice( i, 1 ); // remove from root
                i--; // iterator correction
              } else {
                data[i][PARENT_KEY] = 0; // clean dirty data
              }
            }
          };
          return data;
        }
        
Vue.component('menu-tree', {
          props: ['item'],
          template: '<ul class="c-tree"><li>{{item.MenuName}}<menu-tree v-for="y in item.Items" v-bind:item="y"></menu-tree></li></ul>'
        })

        var app = new Vue({
            el:"#app",
            data:{
                items:[{
                    Id: 1,
                    MenuName: "Menu 1",
                    ParentId: null
                },
                {
                    Id: 2,
                    MenuName: "Menu 2",
                    ParentId: null
                },
                {
                    Id: 3,
                    MenuName: "Menu 3",
                    ParentId: null
                },
                {
                    Id: 4,
                    MenuName: "Sub Menu 1 - 1",
                    ParentId: 1
                },
                {
                    Id: 5,
                    MenuName: "Sub Menu 1 - 2",
                    ParentId: 1
                },
                {
                    Id: 6,
                    MenuName: "Sub Menu 1 - 1 - 1",
                    ParentId: 4
                },
                {
                    Id: 7,
                    MenuName: "Sub Menu 1 - 1 - 1 - 1",
                    ParentId: 6
                }],
                heirarchyItems: []
            },
            created: function(){
                this.heirarchyItems = listToTree(this.items);
            }
        });
.c-tree{
    list-style: none;
}
.c-tree > li {
    margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
    <menu-tree v-for="hItem in heirarchyItems" v-bind:item="hItem"></menu-tree>
</div>

user_10194350
Related