add the rendered field to item to solve the first aspect of #24

Author: eidng8

README.md

@@ -1,18 +1,12 @@
 # vue-tree
 
+[![Master Build](https://travis-ci.com/eidng8/vue-tree.svg?branch=master)](https://travis-ci.com/eidng8/vue-tree)
+[![Master Coverage](https://coveralls.io/repos/github/eidng8/vue-tree/badge.svg?branch=master)](https://coveralls.io/github/eidng8/vue-tree?branch=master)
+
 A Vue.js tree view component with stable DOM tree. By stable, it means the
 DOM structure will not change once it is rendered.
 
 
-## Master Branch
-[![Build](https://travis-ci.com/eidng8/vue-tree.svg?branch=master)](https://travis-ci.com/eidng8/vue-tree)
-[![Coverage](https://coveralls.io/repos/github/eidng8/vue-tree/badge.svg?branch=master)](https://coveralls.io/github/eidng8/vue-tree?branch=master)
-
-## Dev Branch
-[![Build](https://travis-ci.com/eidng8/vue-tree.svg?branch=dev)](https://travis-ci.com/eidng8/vue-tree)
-[![Coverage](https://coveralls.io/repos/github/eidng8/vue-tree/badge.svg?branch=dev)](https://coveralls.io/github/eidng8/vue-tree?branch=dev)
-
-
 ## Performance Consideration
 
 The DOM structure of this component doesn't change once rendered.

src/components/G8TreeView.vue

@@ -26,7 +26,7 @@
         >{{ tag.label }}</label>
       </span>
     </div>
-    <ul v-if="hasChild" class="g8-tree__branch">
+    <ul v-if="expanded || item.rendered" class="g8-tree__branch">
       <g8-tree-view v-for="(child, index) in item.children"
                     :key="index"
                     :item="child"
@@ -45,9 +45,7 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import {G8StateChangeEvent, G8TreeItem} from './types';
 
-@Component({
-  name: 'g8-tree-view',
-})
+@Component({name: 'g8-tree-view'})
 export default class G8TreeView extends Vue {
   @Prop() item!: G8TreeItem;
 
@@ -67,6 +65,10 @@ export default class G8TreeView extends Vue {
     return this.item.children && this.item.children.length;
   }
 
+  created() {
+    console.log(`created: ${this.item.name}`);
+  }
+
   setState(state: boolean) {
     this.item.checked = this.checked = state;
     this.$children.forEach(c => (c as G8TreeView).setState(state));
@@ -75,6 +77,7 @@ export default class G8TreeView extends Vue {
 
   clicked() {
     if (this.hasChild) {
+      this.item.rendered = true;
       this.expanded = !this.expanded;
     }
     this.$emit('click', this.item.key);

src/components/types.ts

@@ -17,6 +17,8 @@ export interface G8TreeItem {
    */
   ints?: boolean;
 
+  rendered?: boolean;
+
   tags?: G8TreeItemTag[];
 
   children?: G8TreeItem[];