I'm trying to make a tree filter on Vue so that the search reveals the full path from the parent to the match. It is impossible to disclose the elements.

Example: http://120.77.84.4/

Component:

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

I tried to add the open property to objects if their children already have an open property with a value of true

Something like that

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

But it does not come out

    1 answer 1

    Try replacing this: if (!!obj.child) { obj.open = !!obj.child.find(el => el.open) } else { obj.open = false } Otherwise, it turns out that the condition will be always run for the last element only.

    • So it turns out that !!obj.child.find(el => el.open) always false - IERomanov
    • Damn, yes, hurried)) Replace find with some - yarkov_aleksei
    • Also false for everything returns) - IERomanov
    • I think this is due to the fact that when recursive f () is called - IERomanov