tree.html — vue Source File

Source Code

<script src="../../dist/vue.min.js"></script>

<!-- item template -->
<script type="text/x-template" id="item-template">
  <li>
    <div
      :class="{bold: isFolder}"
      @click="toggle"
      @dblclick="changeType">
      {{model.name}}
      <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
    </div>
    <ul v-if="isFolder" v-show="open">
      <tree-item
        class="item"
        v-for="model in model.children"
        :model="model">
      </tree-item>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</script>
<!-- item script -->
<script>
  const { reactive, computed, toRefs } = Vue

  const TreeItem = {
    name: 'TreeItem', // necessary for self-reference
    template: '#item-template',
    props: {
      model: Object
    },
    setup(props) {
      const state = reactive({
        open: false,
        isFolder: computed(() => {
          return props.model.children && props.model.children.length
        })
      })

      function toggle() {
        state.open = !state.open
      }

      function changeType() {
        if (!state.isFolder) {
          Vue.set(props.model, 'children', [])
          addChild()
          state.open = true
        }
      }

      function addChild() {
        props.model.children.push({ name: 'new stuff' })
      }

      return {
        ...toRefs(state),
        toggle,
        changeType,
// ... (65 more lines)