2

Пытаюсь сделать фильтр древовидного списка на Vue, чтобы при поиске раскрывался полный путь от родителя до совпадения. Не получается именно раскрывать элементы.

Пример: http://120.77.84.4/

Компонент:

<template>
    <div>
        <Search @input="getValue" style="search"/>

        <TreeList
            class="tree"
            v-for="(branch, index) in filtredData"
            :open="branch.open"
            :content="branch"
            :key="index"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inputValue: '',
            dataTree: [
                {
                    label: 'Lorem1',
                },
                {
                    label: 'Lorem1',
                },
                {
                    label: 'Lorem1',
                },
                {
                    label: 'Lorem1',
                    child: [
                        {
                            label: 'Lorem2',
                            child: [
                                {
                                    label: 'Lorem3',
                                    child: [
                                        {
                                            label: 'Lorem4',
                                        },
                                    ],
                                },
                                {
                                    label: 'Lorem3',
                                },
                                {
                                    label: 'Lorem3',            
                                },
                            ],
                        },
                    ],
                },
            ],
        }
    },
    methods: {
        getValue(value) {
            this.inputValue = value
        },
    },
    computed: {
        filtredData() {
            let value = this.inputValue

            function f(arr) {
                return arr.filter(function(obj) {

                    function checkVal(str){
                        return !!~str.toLowerCase().indexOf(value.toLowerCase())
                    }

                    let c = obj.child ? f(obj.child) : checkVal(obj.label)

                    if (c.length === 0) {
                        return false
                    }
                    return c
                })
            }

            if (value === '') {
                return this.dataTree
            } else {
                return f(this.dataTree)
            }
        }
    }
}
</script>

Я пробовал добавлять свойство open в объекты если у их детей уже есть свойство open со значением true

Что-то вроде этого

if (!!obj.child) {
    obj.child.forEach(el => {
        if (el.open) {
            obj.open = true
        }
    })
} else {
    obj.open = false
}

Но не выходит

1 ответ 1

1

Попробуйте заменить на это: if (!!obj.child) { obj.open = !!obj.child.find(el => el.open) } else { obj.open = false } Иначе у вас получается, что условие будет выполняться всегда только для последнего элемента.

4
  • Так получается что !!obj.child.find(el => el.open) всегда равен false
    – IERomanov
    19 ноя 2018 в 16:14
  • Блин, да, поторопился )) Замените find на some 19 ноя 2018 в 16:30
  • Тоже false для всего возвращает)
    – IERomanov
    19 ноя 2018 в 17:39
  • Мне кажется это из-за того когда вызывается рекурсивная f()
    – IERomanov
    19 ноя 2018 в 17:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.