vue3-tree-vue

vue3-tree-vue copied to clipboard

Hello, When using an async function with dropValidator, dropValidator doesn't work properly.

const onBeforeItemDropped = async (droppedItem: TreeViewItem, dropHost: any) => {
  if (!dropHost || !droppedItem) return false;
  if (dropHost.meta?.type !== 'Folder' || droppedItem.meta?.type === 'Folder')
    return false;

  await apiClient.someMethod();

  return true;
};
</script>

<template>
  <Vue3TreeVue
    :items="treeViewItems"
    @drop-validator="onBeforeItemDropped"
    @on-check="onItemChecked"
    @on-select="onItemSelected"
  >
    <template #item-prepend-icon="treeViewItem">
      <template v-if="treeViewItem.meta?.type === 'Folder'">
        <VIcon>{{ mdiFolder }}</VIcon>
      </template>
    </template>
  </Vue3TreeVue>
</template>

I can confirm that correcting the line below fixes the bug.

// use-tree-mouse-actions.ts

      if (!isDropValid || !(await isDropValid(droppedNode, dropHost))) return;

https://github.com/geekhybrid/vue3-tree-vue/blob/e75a80aa88fc311ae63296610b0fe915e7fe48f9/src/composables/use-tree-mouse-actions.ts#L46

Nice.

Thanks for looking into the code.

I think the original design did not consider an async drop validator function.

Feel free to contribute a fix with a PR. Otherwise, i will do that over the weekend.

HI Is there any plan to apply this feature? I also need this functionality.