Skip to content

not working with nuxt 3 #12

@mohamedhendy

Description

@mohamedhendy

I face a problem when when tring to add it to nuxt 3

    <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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions