Basic usage - Liquor Tree

by amsik

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Basic usage</title>
  <meta charset="UTF-8">
  <!-- first import Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>
</head>
<body>
  <div id="app">
    <tree
      :data="treeData"
      :options="treeOptions"
      @node:selected="onNodeSelected"
    />
  </div>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          treeData: this.getData(),
          treeOptions: {
          }
        }
      },
      methods: {
      	getData() {
        	return Promise.resolve([
            { text: 'Item 1' },
            { text: 'Item 2', state: { expanded: true }, children: [
            	{ text: 'Item 2.1' },
              { text: 'Item 2.2' },
              { text: 'Item 2.3' }
            ]},
            { text: 'Item 3', state: { selected: true } },
            { text: 'Item 4' }
          ])
        },
      
      	onNodeSelected(node) {
        	console.log(node.text)
        }
      }
    })
  </script>
</body>
</html>