Question

我得到类似这样的数据，并说我得到了无限的群组深度。

数据/ group.data.json

module.exports = [
  {
    id: '1',
    title: 'Awesome Group',
    type: '1',
    groups: [
      {
        id: '5',
        title: 'Child in Level Two - A',
        type: '2',
        groups: [
          {
            id: '6',
            title: 'Child in Level Three - A',
            type: '2',
          },
          {
            id: '8',
            title: 'Child in Level Three - B',
            type: '2',
          }
        ]
      },
      {
        id: '7',
        title: 'Child in Level Two - B',
        type: '2',
      }
    ]
  },
  {
    id: '2',
    title: 'Rockers',
    type: '2',
  },
  {
    id: '3',
    title: 'Dazzlers',
    type: '3',
  }
];

我不能像下面那样手动执行此操作，如何动态迭代直到结束？

<ul class="list-group list-group-flush">
  <template v-for="group in groupData">
    <a class="list-group-item" href="#">
      <h6>{{group.title}}</h6>
    </a>
    <template v-for="group in group.groups">
      <a class="list-group-item pl-40" href="#">
        <h6>{{group.title}}</h6>
      </a>
      <template v-for="group in group.groups">
        <a class="list-group-item pl-60" href="#">
          <h6>{{group.title}}</h6>
        </a>
      </template>
    </template>
  </template>
</ul>

<script>
  let groupData = require('../data/group.data');

  export default {
    data () {
      return {
        groupData,
      }
    }
  }
</script>

有一个答案有点像我想要的，但不知道如何在我的案例中使用：https://stackoverflow.com/a/13523953/1292050

Answer 1

一种解决方案就是在模板中引用组件本身。只要没有太多的元素，它应该是完美的。相对于此功能的唯一限制是为组件指定名称。全局注册组件时，会自动完成。如果不这样做，只需在组件对象中指定属性名称。

有关更完整的说明，请参阅the doc。

此外，您必须指定a key属性以循环模板中的组件。

最后，这是你的工作示例：

const tree = [{id:"1",title:"Awesome Group",type:"1",groups:[{id:"5",title:"Child in Level Two - A",type:"2",groups:[{id:"6",title:"Child in Level Three - A",type:"2"},{id:"8",title:"Child in Level Three - B",type:"2"}]},{id:"7",title:"Child in Level Two - B",type:"2"}]},{id:"2",title:"Rockers",type:"2"},{id:"3",title:"Dazzlers",type:"3"}];

Vue.component('Group', {
  name: 'Group',
  template: `<div>
    <a class="list-group-item" href="#">
      <h6>
        <template v-for="d in deep">-</template>
        {{ value.title }}
     </h6>
    </a>
    <group v-for="g in value.groups" 
      :value="g" 
      :deep="deep + 1" 
      :key="g.id">
    </group>
  </div>`,
  props: ['value', 'deep']
});

new Vue({
  el: '#app',
  data: {
    tree
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app">
  <group v-for="t in tree" 
    :value="t" 
    :deep="1" 
    :key="t.id">
  </group>
</div>

获取对象或数组的深度

1 个答案: