data/items of draggabletree is not reactive

[prpanto]

I try to add or remove data/items on the draggabletree and it is not react the data/items.

<script setup>
import { Draggable, OpenIcon } from '@he-tree/vue'
import '@he-tree/vue/style/default.css'

const data = ref([
  {
    name: 'Projects',
    children: [
      {
        name: 'Frontend',
        children: [
          {
            name: 'Vue',
            children: [
              { name: 'Nuxt', children: [] },
            ],
          },
          {
            name: 'React',
            children: [
              { name: 'Next', children: [] },
            ],
          },
          { name: 'Angular', children: [] },
        ],
      },
      { name: 'Backend', children: [] },
    ],
  },
  { name: 'Photos', children: [] },
  { name: 'Videos', children: [] },
])

function addData() {
  data.value.push({
    name: `Test ${data.value.length + 1}`,
    children: [],
  })
  
  console.log(data.value)
}

function findAndRemoveNode(nodes, targetNode) {
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i] === targetNode) {
      nodes.splice(i, 1);
      return true;
    }
    if (nodes[i].children && nodes[i].children.length > 0) {
      if (findAndRemoveNode(nodes[i].children, targetNode)) {
        return true;
      }
    }
  }
  return false;
}

function deleteData(node) {
  findAndRemoveNode(data.value, node);
  console.log(data.value)  
}
</script>

<template>
  <v-container>
    <v-card>
      <v-card-text>
        <Draggable v-model="data" text-key="name">
          <template #default="{ node, stat }">
            <div class="he-tree-node-row">
              <div>
                <OpenIcon
                  v-if="stat.children.length"
                  :open="stat.open"
                  @click.native="stat.open = !stat.open"
                  class="mr-2"
                />

                <span>{{ node.name }}</span>
              </div>

              <div>
                <v-btn icon="mdi-pencil" size="x-small" color="green" class="mr-2" />
                <v-btn icon="mdi-delete" size="x-small" color="red" @click="deleteData(node)" />
              </div>
            </div>
          </template>
        </Draggable>

        <v-btn class="mt-2 w-100" @click="addData">Add Item</v-btn>
      </v-card-text>

      <v-card-actions>
        <v-btn color="primary">Save</v-btn>
      </v-card-actions>
    </v-card>

    {{ data }}
  </v-container>
</template>

<style>
.he-tree-drag-placeholder {
  background: #F5F5F5;
  border: 1px dashed #E0E0E0;
}
.he-tree-node-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
}
</style>

[phphe]

use add method: https://hetree.phphe.com/v2/api#methods

[prpanto]

Thanks for the reply you save me. Happy new year too.