Editing - Liquor Tree

by amsik

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Liquor Tree: Editing</title>
    <!-- first import Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/liquor-tree"></script>
  </head>
  <body>
    <div id="app">
      <div class="examples">
        <div class="example">
          <tree
            :data="data"
            :options="treeOptions" />
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: () => ({
          data: getData(),
          treeOptions: {
          	editing: true
          }
        })
      })

      function getData() {
        return new Promise(resolve => {
          setTimeout(_ => {
            resolve([
              { "text": "Introduction (NOT EDITABLE)", "state": { "expanded": true, "editable": false }, "children": [
                { "text": "Who Should Read This Book?" },
                { "text": "How to Read This Book" },
                { "text": "What’s in This Book?" },
                { "text": "Have Fun!" }
              ]},
              { "text": "Part I: Fundamentals", "children": [
                { "text": "What Is JavaScript?", "children": [
                  { "text": "Meet JavaScript" },
                  { "text": "Why Learn JavaScript?" },
                  { "text": "The Structure of a JavaScript Program", "children": [
                    { "text": "Syntax" },
                    { "text": "Comments" }
                  ]}
                ]},
                { "text": "Data Types and Variables", "children": [
                  { "text": "Numbers and Operators" },
                  { "text": "Variables", "children": [
                    { "text": "Naming Variables" },
                    { "text": "Creating New Variables Using Math" },
                    { "text":...