jtw-maxdepth

jtw-md.js

Vue.component("tree-view-item", Vue.extend({
  name: "tree-view-item",
  props: ["data", "max-depth", "current-depth"],
  data: function(){
    return {
      open: this.currentDepth < this.maxDepth
    }
  },
  methods: {
    isOpen: function(){
      return this.isRootObject(this.data) || this.open;
    },
    //...
  },
  template:`
    <div class="tree-view-item">
      <div v-if="isObject(data)">
        ...          
        <tree-view-item :max-depth="maxDepth" :current-depth="currentDepth+1" v-show="isOpen()" v-for="child in data.children" :data="child"></tree-view-item>
      </div>
      <div v-if="isArray(data)">
        ...
        <tree-view-item :max-depth="maxDepth" :current-depth="currentDepth+1" v-show="isOpen()" v-for="child in data.children" :data="child"></tree-view-item>
      </div>
      ...
    </div>
  `
}));

Vue.component("tree-view", Vue.extend({
  name: "tree-view",
  props: ["data", "max-depth"],
  template: `
    <div class="tree-view">
      <tree-view-item :data="parsedData" :max-depth="maxDepth" :currentDepth="0"></tree-view-item>
    </div>`,
  //..
}));