使用VueJS创建当前批量数据的数组

Question

我每次调用array时都尝试使用当前data创建toggle-function。因此，当我使用toggle-function拨打group上的pattern: "group1"时，我希望能够在屏幕上拨打{{model.groups[0].pattern}}并显示group2。

在这里您可以看到我的数据的构建：

{
  payload: 
    {
      groups: [{
        pattern: "group1",
        groups: [{
          pattern: "group2"
        }],
        routes: [{
          pattern: "route1"
        }]
      }],
      routes: [{
        pattern: "route2"
      }]
    }
}

这是切换功能：

toggle: function () {
  if (this.isGroup || this.isRoute) {
    this.open = !this.open
  }
}

这就是我调用toggle-function

的方法

<div :class="{bold: isGroup || isRoute}">
  <div @click="toggle">
    <span v-if="model.pattern">{{model.pattern}}</span>
    <span v-if="isGroup || isRoute">[{{open ? '-' : '+'}}]</span>
  </div>
</div>
<ul v-show="open" v-if="isGroup || isRoute">
  <item
    class="item group"
    v-for="model in model.groups"
    :model="model">
  </item>
  <item
    class="item route"
    v-for="model in model.routes"
    :model="model">
  </item>
</ul>

或许任何人都可以从树视图中分离列表项：

https://jsfiddle.net/inbar11/3p0j5sgy/33/

这样我就可以将第一层子数组放在第二列（将其视为bootstrap-class col-md-3），将第二层子数组放入第三列。