Vue.js 2.0 json tree

Vue.js 2.0 json tree

by valinton

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/v-json-tree/dist/v-json-tree.css">
<script type="text/javascript" src="https://unpkg.com/v-json-tree/dist/v-json-tree.js"></script>

<div id="demo">
  <form id="search">
    Search
    <input name="query" v-model="searchQuery">
  </form>
  <json-tree :data="jsonData" :filter-key="searchQuery"></json-tree>
</div>

CSS

.key {
  font-weight: bold;
}

JavaScript

// bootstrap the demo
//Vue.use(JsonTree)

var demo = new Vue({
  el: '#demo',
  data: {
    searchQuery: '',
    jsonData: []
  },
  methods: {
      getJobs() {
          var route = 'https://codepen.io/jobs.json';
          this.$http.get(route).then((response) => {
            this.jsonData = response.data.jobs;
          });
        }
  },
  ready() {
  	console.log(demo);
    this.getJobs();
  }
})