时间戳

首页 > 解决方案 > 在输入到输入上过滤嵌套数组

javascript - 在输入到输入上过滤嵌套数组

问题描述

我正在尝试过滤数组的子元素，但我不明白如何专门引用子元素。到目前为止，我只有一个顶级过滤器。

大批：

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());
            });
        },
    },

标签： javascriptvue.js

解决方案

尝试扁平化并映射该数组并在其中过滤：

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

JS 示例

let options = [{
    name: 'smith',
    value: null,
    children: [{
        name: 'john',
        value: 53
      },
      {
        name: 'Обрыв детали',
        value: 54
      }
    ]
  },

  {
    name: 'foobar',
    value: null
  },

  {
    name: 'foo',
    value: null,
    children: [{
        name: 'bar',
        value: 55
      },
      {
        name: 'aaaa',
        value: 56
      }
    ]
  },

]

let filtered =
  options.flatMap(option => {
    return option.children;
  }).filter(elem => {
    return elem && elem.name.toLowerCase().includes('bar');
  })

console.log(filtered)

推荐阅读