Redefine Struncture - Liquor Tree

by SĂ©bastien Lorentz

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Redefine Struncture</title>
  <meta charset="UTF-8">
</head>
<body>
  <div id="app">
    <tree
      class="tree--small"
      :data="treeData"
      :parentSelect="parentSelectParam"
      :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,
            parentSelect: true,
            autoDisableChildren: false,
            propertyNames: {
              text: 'MY_TEXT',
              children: 'KIDS'
            }
          }
        }
			}
    })
    
    
    function getTreeData() {
    
    // 
    
    	return [
          {
            MY_TEXT: 'JS: The Right Way',
            state: { expanded: true, disabled: false  },
            KIDS: [
              { MY_TEXT: 'Getting Started', state: { checked: true, disabled: false } },
              { MY_TEXT: 'JavaScript Code Style', state: { checked: true, disabled: true  } }
  
            ]
          }
        ]
    }
  </script>
</html>

JavaScript

new Vue({
      el: '#app',
      data: function() {
        return {
          parentSelectParam: true,
          treeData: [
            {
              "id": 0,
              "text": "Parent",
              "data": null,
              "children": [
                { text: 'Item 1' },
                { text: 'Item 2' },
                { text: 'Item 3', state: { selected: true } },
                { text: 'Item 4' }
              ]
            }
          ]
        }
      },
      methods: {
         toggleParentSelect() {
           this.parentSelectParam = !this.parentSelectParam
         }
      }
    })