Redefine Struncture - Liquor Tree

by amsik

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Redefine Struncture</title>
  <meta charset="UTF-8">
</head>
<body>
  <div id="app">
    <tree
      class="tree--small"
      :data="treeData"
      :options="treeOptions"
    />
  </div>
</body>
  <!-- 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>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          treeData: getTreeData(),
          treeOptions: {
            checkbox: true,
            propertyNames: {
              text: 'MY_TEXT',
              children: 'KIDS'
            }
          }
        }
			}
    })
    
    
    function getTreeData() {
    	return [
          {
            MY_TEXT: 'JS: The Right Way',
            state: { expanded: true },
            KIDS: [
              { MY_TEXT: 'Getting Started', state: { checked: true } },
              { MY_TEXT: 'JavaScript Code Style', state: { selected: true } },
              { MY_TEXT: 'The Good Parts', KIDS: [
                { MY_TEXT: 'OBJECT ORIENTED', state: { checked: true }  },
                { MY_TEXT: 'ANONYMOUS FUNCTIONS', state: { checked: true }  },
                { MY_TEXT: 'FUNCTIONS AS FIRST-CLASS OBJECTS', state: { checked: true }  },
                { MY_TEXT: 'LOOSE TYPING', state: { checked: true }  }
              ]},
              { MY_TEXT: 'Patterns', KIDS: [
                { MY_TEXT: 'DESIGN PATTERNS', state: { expanded: true }, KIDS: [
                  { MY_TEXT: 'Creational Design Patterns', KIDS: [
                    { MY_TEXT: 'Factory' },
                    { MY_TEXT: 'Prototype' },
                    { MY_TEXT: 'Mixin' },
                    { MY_TEXT: 'Singleton' }
                  ]},
                  { MY_TEXT: 'Structural Design Patterns'}
                ]},
                { MY_TEXT: 'MV* PATTERNS', cildren: [
             ...