<h1>Basic</h1>
<div>
<VueBlocksTree :data="treeData" :horizontal="treeOrientation == '1'" :collapsable="true"></VueBlocksTree>
</div>
</template>
<script setup>
import VueBlocksTree from 'vue3-blocks-tree';
import 'vue3-blocks-tree/dist/vue3-blocks-tree.css';
console.log("VueBlocksTree", VueBlocksTree)
let selected = ref([]);
let treeOrientation = ref('0');
let treeData = reactive({
label: 'root',
expand: true,
some_id: 1,
children: [
{ label: 'child 1', some_id: 2 },
{ label: 'child 2', some_id: 3 },
{
label: 'subparent 1',
some_id: 4,
expand: false,
children: [
{ label: 'subchild 1', some_id: 5 },
{
label: 'subchild 2',
some_id: 6,
expand: false,
children: [
{ label: 'subchild 11', some_id: 7 },
{ label: 'subchild 22', some_id: 8 },
],
},
],
},
],
});
const toggleSelect = (node, isSelected) => {
isSelected ? selected.value.push(node.some_id) : selected.value.splice(selected.value.indexOf(node.some_id), 1);
if (node.children && node.children.length) {
node.children.forEach((ch) => {
toggleSelect(ch, isSelected);
});
}
};
</script>
I face a problem when when tring to add it to nuxt 3