VueJs递归无限v-for循环

Question

我正在尝试创建一个层级树，其中我有一个用户列表，对于每个用户，我都设置了一个“高级”，以定义谁是高级。这是我尝试解决问题的方式：

这是我正在做的事情：

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
   );
  }
}

然后是组件树：

<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>

这很完美，但仅限于3级。我实际上不知道用户可能会深入多少级。

因此，想法是拥有一个递归组件，但我不知道如何实现。类似以下内容：

<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>

- Mr.Web

---

你读过这篇文章吗？https://dev.to/proticm/vue-and-recursive-components-15n7 - Taha Paksu

@TahaPaksu 不用了！谢谢，我现在就去看看。 - Mr.Web

我不确定我理解为什么你需要一个递归组件，.filter将返回一个包含给定初级的所有seniors的数组，除非我没有正确理解你的数据。(与.find相反，它只返回一个值而不是一个数组(第一个值)) - Michael

你好 Michael，我正在根据 senior_id 字段进行筛选。我有一个下拉菜单，在用户“Bill Simons”上，我选择他的上级为“Joe”，因此Bill现在将拥有 senior_id:1。循环只显示那些具有 senior_id:1 的用户来展示“他的腿”。这有意义吗？ - Mr.Web

Answer 1

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>

- Palanikumar