Vue.js 2.0 json tree

Vue.js 2.0 json tree

by Michael Menaker

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: {
      "test": "test",
      "obj": {
        "test": "test2"
      },
      "arr": [1, 2, 3],
      "another test": "val"
    }
  }
})