vuejs tree

example tree on vuejs

by hronic

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Custom Node</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>
  <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" media="all" rel="stylesheet" type="text/css" />

</head>
<body>
  <div id="app">
  
    <div class="examples">
      <div class="example">
        <div class="example-description">
          Font ionicons. (http://ionicons.com). Implementing Filesystem.
        </div>
        <div class="example-tree">
          <tree :data="treeData0" >
            <span class="tree-text" slot-scope="{ node }">
              <template v-if="!node.hasChildren()">
                <i class="ion-android-star"></i>
                {{ node.text }}
              </template>

              <template v-else>
                <i :class="[node.expanded() ? 'ion-android-folder-open' : 'ion-android-folder']"></i>
                {{ node.text }}
              </template>
            </span>
          </tree>
        </div>
      </div>

    </div>
  </div>
</body>
  <script>
    new Vue({
        el: '#app',
        data: () => ({
          treeData0: getTreeData0()
        })
      })

      function getTreeData0() {
        return [
          { text: 'Disc C:', state: { expanded: false }, children: [
            { text: 'PerfLogs' },
            { text: 'Users', children: [
              { text: 'User 1' },
              { text: 'User 2' },
              { text: 'User 3' }
            ]},
            { text: 'tomcat' },
          ]},
            { text: 'Currencies', children: [
            { text: 'Dollar', data: { icon: 'ion-social-usd' } },
            { text: 'Bitcoin', data: { icon: 'ion-social-bitcoin' } },
            { text: 'Yen', data: { icon: 'ion-social-yen' } },
            { text: 'Euro', data: { icon:...