Skip to content

Instantly share code, notes, and snippets.

@arvidkahl
Created February 18, 2017 09:26
Show Gist options
  • Save arvidkahl/779a8e4778ea92eeb6efb66f556c6650 to your computer and use it in GitHub Desktop.
Save arvidkahl/779a8e4778ea92eeb6efb66f556c6650 to your computer and use it in GitHub Desktop.
jtw-maxdepth
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>`,
//..
}));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment