after use addBefore i need to sort nodes.

How to get parent node?

Hi Zhu,

It appears that if I take the same example as in the documentation, I'm not able to addChild on a node.

Node editing and deletion works fine but I'm afraid I don't get addChild to work properly, the exact error message is "Uncaught TypeError: this.editingNode.addChild is not a function"

Where can I check the icons available for use in the field 'icon'

I really miss the possibility to reorder items. Do you have any plans to add this feature? If so, is there a way to help you?

How to remove folder icon from list?

Hello, i'm trying to setting the tree data dynamic, but somehow the tree won't expand collapsed nodes after the tree is build:

me.treeData = [{ "text": "Same but with checkboxes", "children": [ { "text": "initially selected", "selected": true }, { "text": "custom icon", "icon": "fa fa-warning icon-state-danger" }, { "text": "initially open", "icon": "fa fa-folder icon-state-default", "opened": true, "children": [ { "text": "Another node" } ] }, { "text": "custom icon", "icon": "fa fa-warning icon-state-warning" }, { "text": "disabled node", "icon": "fa fa-check icon-state-success", "disabled": true } ] }, { "text": "Same but with checkboxes", "opened": true, "children": [ { "text": "initially selected", "selected": true }, { "text": "custom icon", "icon": "fa fa-warning icon-state-danger" }, { "text": "initially open", "icon": "fa fa-folder icon-state-default", "opened": true, "children": [ { "text": "Another node" } ] }, { "text": "custom icon", "icon": "fa fa-warning icon-state-warning" }, { "text": "disabled node", "icon": "fa fa-check icon-state-success", "disabled": true } ] }, { "text": "And wholerow selection" }];

Regards

First of all: Thanks for this component, it's nice! 🎉

I need the possibility to open items on hover.
As stated in the title I want to expand an item if it is hovered by another item (another item is dragged onto this item). I tried to achieve this using the item-drag-start and item-drag-end events (to set a dragging flag) and the mouseover event in item-events to check the dragging flag and expand the hovered item if dragging = true. But the mouseover event is not fired, since the dragged element is to top-most element.
Would it be possible to add a drag event or is there any other solution I don't see? :)

我该如何新添一个事件，我想增加右击事件，和hover事件，该怎么做？

V2.1.3 multiple= false Does not work

Please provide the option to directly set a leaf

maybe something like this ?
handleAsyncLoad(oriParent, oriNode, oriItem) { var self = this if (this.async) { if (oriParent[0].loading) { this.async(oriNode, (data) => { if (data.length > 0) { for (let i in data) { if(!data[i].isLeaf) { data[i].children = [self.initializeLoading()] } var dataItem = self.initializeDataItem(data[i]) self.$set(oriParent, i, dataItem) } } else { oriNode.model.children = [] } }) } } },

When I load the tree dynamically, can I specify that it doesn't have any children? I tried to set children property to false or [ ], but it didn't work:

var leaf_lode = {
    text: 'some description',
    children: false,
    id: 'some id'
};

Hello, folder dragging and nesting in general work well -- until you need to drag a folder to the top (or root) level, then there is no drop point at which it works. Please advise.

我们的ui设计的每一个item的高度是40px;
但是我看了源码，好像里面只支持small和large两个选项，这两个都不能满足需求。
可否将size设置为可以自定义的，那样或许更灵活！
谢谢！

There is some error on Drag'n'Drop:

[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'parentItem' of null vue.runtime.esm.js?ff9b:1713 TypeError: Cannot read property 'parentItem' of null at VueComponent.eval (webpack-internal:///278:1:8400)

here:
var r=this;this.$nextTick(function(){r.draggedItem.parentItem.splice(r.draggedItem.index,1)})

So nextTick seems to be called after onItemDragEnd...

If change to this:
var r=this.draggedItem;this.$nextTick(function(){r.parentItem.splice(r.index,1)})
then no errors anymore!

Thanks for this fantastic plugin integration for Vue 2.0.

The plugin is working fine and as expected, I only have 2 questions (things that I cant' achieve)

• Detect when an unselected node is toggled (expanded / collapsed) as I need to store the opened / closed state of nodes. Tried @item-toggle="itemToggle" as @item-click is working fine but I didn't succeed, it does nothing even with a console.log inside to see if it goes through the function (my assumption is the function is never called and the event onItemToggle is never fired

• I want to send a node deletion command to the tree using Vue 2.0 (and also rename the node) as I created buttons to create new nodes (works fine), delete an existing node (undone for the moment), rename a node (undone for the moment).

Any help would be greatly appreciated and at the end I'll be able to share a full example with more capabilities than the current documentation.

Thanks in advance.

I have an application where I simulate actual system folders. I need the "treeview" to trigger a method that will accept the payload of the "drag-and-drop" event. I'm not quite sure I understand your API on exposing events. Would it be possible to expose drop and dragend in the same manner that you expose item-click?

Hi,

I was unable to access functions like openChildren closeChildren from my item using the item-click event. It seems that .initializeData is only called in created hook. In my case, I do update data from outside of my component.

It this intended? I tried to used updated instead of created but wasn't able to get it work either..

Thanks for your help!

Error in created hook: "TypeError: Cannot assign to read only property '0' of object '[object Array]'"

I think this is because of trying to mutate the 'data' prop object.

To make a file browser based on your component, drop should only work to a folder.

Can be added Data Item Optional Properties, like dropEnable ?

how to change icon

Hello,

if you don't use text field name "text", the item will not be shown in the tree. Please, make the correction in:

Tree Item.vue to this:

        initializeDataItem (item) {
            function Model(item, textFieldName, valueFieldName) {
                this.id = item.id || ITEM_ID++
                this['text'] = item[textFieldName] || ''
                this['value'] = item[valueFieldName] || item[textFieldName]
                this.icon = item.icon || ''
                this.opened = item.opened || false
                this.selected = item.selected || false
                this.disabled = item.disabled || false
                this.loading = item.loading || false
                this.children = item.children || []
            }

Bugs on your example!

1. when click top line same but with checkboxes also selected node initially open!
2. edit tree/ click the tree node - table has two row with icon filed

if possible - add drop to external component example

Hello, guys,

Could you show me how to implement this lib in SSR mode ?

Grateful to your helps

this is my async code:

async loadData(oriNode, resolve) {
                var data = [];
                if (!oriNode || !oriNode.data.id) {
                    debugger;
                    let _oe = new objectEntities;
                    let _objectName = _oe.getObject(this.objectId).LocalizeName;
                    data = null;
                    data = [
                        {
                            "text": _objectName,
                            "value": "0",
                            "id": "0",
                        },
                    ];
                }
                else {
                    let os = new objectService;
                    var _apiData = [];
                    if (oriNode.data.value === "0") {
                        _apiData = await os.loadLookupData(this.objectId, "ParentID is Null");
                    }
                    else {
                        _apiData = await os.loadLookupData(this.objectId, "ParentID = " + oriNode.data.value);
                    }
                    data = _apiData.map(function (s) {
                        var childlength = s.children;
                        if (childlength === 0) {

                            return {
                                "text": s.name + childlength,
                                "value": s.id,
                                "id": s.id,
                            }
                        }
                        else {
                            return {
                                "text": s.name + childlength,
                                "value": s.id,
                                "id": s.id,
                            }
                        }
                    });
                }
                resolve(data);
            },

watch: {
            '$route'(to, from) {
                this.loadData();
            },
        }

Can I reset the tree back to the states that none of them were selected?

貌似该插件只支持写死的数据，如果从后台请求过来的数据更新了data之后没有初始化，里面的所有方法都没有了，比如addAfter(),addChild()等都失效了

我现在有个系统在做从angularjs迁移vue的工作, 里面用到了jstree, 不过用angularjs进行了封装, 原有的jstree功能都继承过来了, 包含右键菜单, 数据转换, 所有事件与API. 在迁移VueJS的时候本来想找找看有没有类似angularjs现成的jstree组件.
发现了你的项目, 第一眼从api和sample中的数据结构/样式, 差点以为是原生jstree的封装.
我有两点疑问请教一下:

1. 我是刚开始用Vue还不太熟练, Jstree发展了很多年了, 功能和稳定度都已经很成熟了, 为什么作者当初没有选择对原有jstree进行封装, 而是自己重新实现一遍, 这样很多jstree原有的功能都丢失了, 比如:右键菜单, 其他的还没细看

2. 原有的jstree能够直接处理下面这种父子节点关系声明式的数据, 在vue-jstree里面是要自己处理成层级关系的数据才能用吗

'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]

期待回答, 谢谢

From looking at the source, I can see that item-click is accessible. I can even access drop However, I would also think that item-drag-start (or drag-start) and the like would be exposed. Please explicitly state all exposed events. If there are only the few listed, please expose more.

Primary use case I need to solve involves updating folder hierarchy on the server. While I can acquire the target folder, I need to know what item is being dragged and dropped. I suppose I could work around it by looking inside the target folder then calling update for every contained folder, but that seems a terrible solution.

hi,
how to get all selecte id?no api?

按照wiki里面的介绍，使用组件的时候报上面的错误。

报错的详细信息如下：

17:573 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VJstree>
       <ElAside>
         <ElContainer>
           <Wiki> at D:\WeiboGit\content-platform-static\src\components\page\content\board\Wiki.vue
             <Home> at D:\WeiboGit\content-platform-static\src\components\common\board\Home.vue
               <App> at D:\WeiboGit\content-platform-static\src\App.vue
                 <Root>

下面是我引用的时候页面的代码：

<template>
    <el-container class="el-container">
        <el-aside class="el-aside" width="300px">
            <v-jstree :data="treeData" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>
        </el-aside>
        <el-container>
            <el-main>

            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import VJstree from 'vue-jstree'

    export default {
        components: {
            VJstree
        },
        data() {
            return {
                treeData: [
                    {
                        "text": "Same but with checkboxes",
                        "children": [
                            {
                                "text": "initially selected",
                                "selected": true
                            },
                            {
                                "text": "custom icon",
                                "icon": "fa fa-warning icon-state-danger"
                            },
                            {
                                "text": "initially open",
                                "icon": "fa fa-folder icon-state-default",
                                "opened": true,
                                "children": [
                                    {
                                        "text": "Another node"
                                    }
                                ]
                            },
                            {
                                "text": "custom icon",
                                "icon": "fa fa-warning icon-state-warning"
                            },
                            {
                                "text": "disabled node",
                                "icon": "fa fa-check icon-state-success",
                                "disabled": true
                            }
                        ]
                    },
                    {
                        "text": "Same but with checkboxes",
                        "opened": true,
                        "children": [
                            {
                                "text": "initially selected",
                                "selected": true
                            },
                            {
                                "text": "custom icon",
                                "icon": "fa fa-warning icon-state-danger"
                            },
                            {
                                "text": "initially open",
                                "icon": "fa fa-folder icon-state-default",
                                "opened": true,
                                "children": [
                                    {
                                        "text": "Another node"
                                    }
                                ]
                            },
                            {
                                "text": "custom icon",
                                "icon": "fa fa-warning icon-state-warning"
                            },
                            {
                                "text": "disabled node",
                                "icon": "fa fa-check icon-state-success",
                                "disabled": true
                            }
                        ]
                    },
                    {
                        "text": "And wholerow selection"
                    }
                ],

            }
        },
        methods: {
            itemClick(node) {
                console.log(node.model.text + ' clicked !')
            }
        },
    }
</script>

<style scoped>
   
</style>

Do you have IE11 support? When I tried to open your demo page I receive errors and it fails to render the page.

Hi
how i can refresh data of tree with a button?

I can't customizing! When I set the style it affects the height. How to set padding between items.

If you specify a padding, the script does not correctly calculate the height.

我后台load数据到data中的一个list，然后照着demo写了，数据是帮上去了，但是点击事件都没了，如果我用后来load的json数据直接写到data里，就没有这个问题，能帮忙看看吗

hi thanks for update it's very use full.

can you help me to get array of selected ids?

like this:
{1,23,43,12}

How correctly the parameter is named?

On manual it called allowBatch
in the example it called allow-batch

What does it do?

Looks really good and handy library. I am looking to move to vuejs and hence stumbled into this as I like to include jstree to one of my works.

Wondering if there is any timeline for the stable release of vue-jstree?

Thanks heaps!

I'm trying to implement a local storage (vuex) of the current state of the tree, so that it will not start "closed" when I return the next time.

Managed to save current state through @item-toggle callback, but if I use it to set initial state i get an infinite loop. Could you please provide an example of how to solve this?

Also, I'm wondering if there are any plans on handling drag-n-drop to change the individual order of nodes? Seems like it could only handle dragging between different parents today?

Please add events:

onBeforeNodeOpen(node) - on click "+"
onAfterNodeClosed(node) - on click "-"

onBeforeNodeOpen - i will load node children from database to tree (If several users simultaneously work with the tree, need to update the children before open the node)
onAfterNodeClosed - i will delete node children and create one fake child for "+" was visible

This will solve the performance problem - because the total number of nodes in the tree will decrease.

addBefore, addAfterNode, addChildNode must return an added node.

For example, to make it selected.

It would be great if we have a property to change the children field like textFieldName and valueFieldName.

Hi, could you please explain how to use
textFieldName and valueFieldName props?

Hi, very nice and useful lib!

Can I use custom html to render the tree items? for example using slots or whatever?
My problem is that I need a more complex item, that is, not just a text line but also images and other info, so I can't just customize the item with CSS.

Luca

I need the ability to manually trigger a click. For example, on page load, I'd like to select the first item, and trigger its item-click event. Please advise.

if set multiple=true,it allow to unselect all node,
but when set multiple=false,if i select a node ,i can not unselect it
i think it reasonable that user want to cancel it if select by mistake.
thanks!

In the demos it appears that selected rows highlight grey. However, using a vanilla install, this doesn't seem to be the case. Full, disclosure, I am using Bootstrap, but I can't discern any collisions of any sort. Please advise.

To my example i added performance test

Use my example to check performance

1. click on Folder1 then add 1000 files to it, click '-'
2. click on Folder2 then add 1000 files to it, click '-'
3. Right click on Folder3 and add one file

click +/- of Folder3 - get big delay! Why? There is only one file!
What is calculated so long?