arvidkahl

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(){

arvidkahl

// Modifying the tree-view-item component
// ...
  data: function(){
    return {
      open: true
    }
  },
  methods: {
    isOpen: function(){
      return this.isRootObject(this.data) || this.open;

arvidkahl

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

arvidkahl

// ... inside the tree-view component

  methods: {
  
    // Transformer for the non-Collection types, 
    // like String, Integer of Float
    transformValue: function(valueToTransform, keyForValue){
    	return {
      	key: keyForValue,
        type: "value",

arvidkahl

Vue.component("tree-view", Vue.extend({
  name: "tree-view",
  template: "<div>Tree View</div>",
  props: ["data"],
  methods: {},
  computed: {}
}));

// To be used with <tree-view :data="sampleData"></tree-view>

arvidkahl

<div class="container" id="vue-root">
  <div class="row">
    <div class="col-xs-12">
      <h1>A JSON Tree View Component in Vue.js</h1>      
    </div>  
  </div>

  <div class="row">
    <div class="col-xs-6">
      <pre><code>{{formatJSON(sampleData)}}</code></pre>

arvidkahl

// Emit an Event from a Component using the internal Event Bus

let ComponentWithEventBus = Vue.extend({
  mounted: function(){
    this.$bus.$emit('status', 'Component mounted')
    this.$bus.$on('something', ()=>{
      console.log("Something happened");
    });
  }  
});

arvidkahl

    // Create a global Event Bus
    var EventBus = new Vue()

    // Add to Vue properties by exposing a getter for $bus
    Object.defineProperties(Vue.prototype, {
        $bus: {
            get: function () {
                return EventBus;
            }
        }

arvidkahl

// Two isolated components accessing the same global 

let ComponentA = Vue.extend({
  created: function(){
    EventBus.$on(“thatEvent”, ()=>{
      console.log(“Event received”);
    })
  }
});

arvidkahl

// A single, basic Vue.js instance

let EventBus = new Vue();