Почему не фильтруется вложенный массив?

Question

[ekzotika]

Я пытаюсь фильтровать элемент children у массива, но не понимаю, как мне обратиться именно к children. Пока что у меня идёт фильтр только верхнего уровня.

Массив:

options: [
                    {name: 'Выход детали из строя в процессе эксплуатации', value: null,
                        children: [{name: 'Увеличение зазора, люфт (дробь/стуки)', value: 53},
                                    {name: 'Обрыв детали', value: 54}]},

                    {name: 'Поломка при установке', value: null},

                    {name: 'Брак до установки', value: null,
                        children: [{name: 'Недокомплект', value: 55},
                                    {name: 'Заводской брак (замятия, отсутствие резьбы, пробой пыльника и т.д.)',
                                        value: 56}]},

         ],

Вывод списка:

<div v-if="areOptionsVisible"
         :style="{maxHeight: maxHeight, overflow: 'auto', zIndex: zIndex}"
         class="w-autocomplete__items">
        <div v-for="option in filteredOptions" class="w-autocomplete__item_first" >
            {{ option.name }}

                <div v-for="item in option.children" class="w-autocomplete__item"
                    :class="{'w-autocomplete__item_active': currentIndex === item}"
                    @mouseenter="setActive(item)"
                     @keyup.up="changeCurrent('up', item)"
                     @keyup.down="changeCurrent('down', item)"
                     @click="doChoose(item)">
                    {{ item.name }}
                </div>
        </div>
    </div>

Сам фильтр:

computed: {
        filteredOptions(){
            return this.options.filter(elem => {
                return elem.name.toLowerCase().includes(this.searchText.toLowerCase());
            });
        },
    },

Answer 1

[Александр]

filteredOptions() {
    return filter(this.options, new RegExp(this.searchText, 'gi'));
},

И сама функция filter:

const filter = (data, needle, store = []) => {
    for (const entry of data) {
        const branch = {
            ...entry,
            children: []
        };
        const isValid = needle.test(entry.name);

        if (entry.hasOwnProperty('children') && entry.children.length > 0) {
            filter(entry.children, needle, branch.children);

            if (branch.children > 0 || isValid) {
                store.push(branch);
            }
        } else {
            if (isValid) {
                store.push(branch);
            }
        }
    }

    return store;
};

Пример

const options = [
    {
        name: 'Выход детали из строя в процессе эксплуатации',
        value: null,
        children: [
            {
                name: 'Увеличение зазора, люфт (дробь/стуки)',
                value: 53
            },
            {
                name: 'Обрыв детали',
                value: 54
            }
        ]
    },
    {
        name: 'Поломка при установке',
        value: null
    },
    {
        name: 'Брак до установки',
        value: null,
        children: [
            {
                name: 'Недокомплект',
                value: 55
            },
            {
                name: 'Заводской брак (замятия, отсутствие резьбы, пробой пыльника и т.д.)',
                value: 56
            }
        ]
    }
];

console.log(filter(options, new RegExp('детали', 'gi')));
/*
[
    {
        name: 'Выход детали из строя в процессе эксплуатации',
        value: null,
        children: [ { name: 'Обрыв детали', value: 54, children: [] } ]
    }
]
*/

Comments

[ekzotika]

Александр, Спасибо большое за ответ! Я новичок, подскажите, пожалуйста, куда мне писать const filter..? В methods или же куда-то ещё?

[Александр]

ekzotika, Можно вынести в отдельный файл, если используете @vue/cli для запуска приложения. Если используете подключение на странице, просто поместите эту функцию рядом с инициализацией Vue.

[Александр]

ekzotika, Также, советую обратить внимание на логику функции. Она использует регулярное выражение. Для корректной работы, необходимо экранировать спецсимволы, используемые в регулярных выражениях. Если это для Вас является сложным, замените проверку на entry.name.toLowerCase().includes(needle), а в вызове необходимо использовать будет следующее:

filteredOptions() {
    return filter(this.options, this.searchText.toLowerCase());
},