jtw-vti-component.js

jtw-vti-component.css

// Add some CSS for indentation
.tree-view-item {
  margin-left: 10px;
}

jtw-vti-component.js

Vue.component("tree-view-item", Vue.extend({
  name: "tree-view-item",
  props: ["data", "keyType"],
  methods: {
    isObject: function(value){
      return value.type === 'object';
    },
    isArray: function(value){
      return value.type === 'array';
    },
    isValue: function(value){
      return value.type === 'value';
    },
    getKey: function(value){
      if (_.isInteger(value.key)) {
        return value.key;
      } else {
        return "\""+ value.key + "\"";	
      }
    },    
    getValue: function(value){
      if (_.isNumber(value.value)) {
        return value.value
      }
      if (_.isNull(value.value)) {
        return "null"
      }
      if (_.isString(value.value)) {}
      return "\""+value.value+"\"";
    },
    isRootObject: function(value){
      return value.isRoot;
    }
  },
  template:`
    <div class="tree-view-item">
      <div v-if="isObject(data)">
        <div class="tree-view-item-grouping">         	
          <span v-if="!isRootObject(data)" class="tree-view-item-key">{{getKey(data)}}</span>
          <span v-if="!isRootObject(data)" class="tree-view-item-divider">:</span>
          { 
        </div>
        <tree-view-item v-for="child in data.children" :data="child"></tree-view-item>
        <div class="tree-view-item-grouping">}</div>
      </div>
      <div v-if="isArray(data)">
        <div class="tree-view-item-grouping">
          <span class="tree-view-item-key">{{getKey(data)}}        
          <span class="tree-view-item-divider">:</span>
          [ 
        </div>
        <tree-view-item v-for="child in data.children" :data="child"></tree-view-item>
        <div class="tree-view-item-grouping">]</div>
      </div>
      <div v-if="isValue(data)">
        <span class="tree-view-item-key">{{getKey(data)}}</span>       
        <span class="tree-view-item-divider">:</span>
        <span class="tree-view-item-value">{{getValue(data)}}          
      </div>
    </div>
  `
}));