Remove externaly

[Jakubsedmik]

trafficstars

Does Treeselect has some method which can remove item from tree select outside of component? Especialy if i want to remove just one child of parent and not all childrens.

For example i got this structure

• parent 1 (selected)
• • child 1 (selected)
• • child 2 (selected)
• • child 3 (selected)

Now in selected data i have: parent1 Thats right but

I need programatically and outside of VueTreeselect remove just child2, this means to remove parent2 and add child1, child3.

I can make algorythm on this but i would like to leave this on Vuetreeselect because i think its implemented already.

You can see on image bellow, i got alternative navigation for selected items and i need to reflect the behavior of treeselect.

[TitanFighter]

It is difficult to understand what you need. Try to remove/add needed items directly to options inside data().

[Jakubsedmik]

Hello, thank you very much for response. I will try to explain again. Imagine this data structure

• Animal -- Dog (selected) --- Labrador --- Golden Retriver --- Pinch -- Cat --- Egyptian --- British Blue

Imagine i got selected the whole branch Dog. I have "Dog" in vue treeselect control. Now if i go to vuetreeselect whisperer and unselect for example "Labrador", my vuetreeselect badges (selected data) will change to: "Golden Retriver, Pinch". Thats because not whole category "Dog" is selected now, but only some childrens of category. This works perfectly.

But now imagine that i have some alternative control for this tree which is very like the whisperet but is made custom to make another aproach to this whispere. By this alternative control i want do the same thing - remove "Labrador".

But the problem here is coming that in selected data i have only one item: "Dog". So if i try to remove "labrador" from selected data, i am unable to do so, because "labrador" is nested under dogs and its not present in selected data - there is only parent "Dog".

What i am asking is - is there some method which is called when you click on cross on "dog" badge - because this method knows how to change "selected data" properly = remove dog, add Golden Retriever, Pinch.

I am already trying to implement it by some node tree but i would rather let vuetreeselect to do it for me right without any bugs - if there is possibility.

Please help me :)

[TitanFighter]

Probably I understood what you mean. You need to write something like this (this is just to show you an idea, nothing tested):

<template>
    <treeselect
        :multiple="true"
        :options="options"
        placeholder="Select your favourite(s)..."
        v-model="value"
    />
</template>

<script>
    data () {
        return {
            value: ['Dog'],

            options: [
                {
                    id: 'Dog',
                    label: 'Dog',
                    children: [
                        {
                            id: 'Labrador',
                            label: 'Labrador',
                        },
                        {
                            id: 'Golden Retriver',
                            label: 'Golden Retriver',
                        },
                        {
                            id: 'Pinch',
                            label: 'Pinch',
                        }
                    ],
                }
            ]
        }
    },

    methods: {
        // childLabel in your case must be 'Labrador'
        removeChild(childLabel) {
            this.options.some((parentObj) => {
                if ('children' in parentObj) {
                    const allNeededChildren = []
                    let childFound = false

                    parentObj.children.forEach((childObj) => {
                        if (childObj.label === childLabel) {
                            childFound = true
                        } else {
                            allNeededChildren.push(childObj.id)
                        }
                    })

                    if (childFound) {
                        this.value = allNeededChildren
                        // Stop .some() loop
                        return true
                    }
                }
            })
        }
    }
</script>

Based on this demo Regarding .some(), if you do not understand it. It is like .forEach + break -> https://stackoverflow.com/a/43525138/4992248