为 v-treeview 搜索嵌套的 JS 对象数组 [英] Search nested array of JS objects for v-treeview

问题描述

我正在尝试使用过滤器函数为我的 Vuetify v-treeview 组件实现搜索功能，该函数用于嵌套的 JS 对象数组，看起来像.

<预><代码>[{Name: '名称级别 1',标题:'标题级别 1'，孩子们: [{Name: 'Name Level 2',Title: 'Title Level 2',孩子们: [ ... ]}]},...]

现在我有文本字段，可以对搜索进行 v 建模，还有一个过滤器功能，看起来像 Bara Koc 评论中的那个.

filter(){return (item, search, textKey) =>{让结果 = []const _filter = (item, search, textKey) =>{for(项目的const叶){if (leaf[textKey].indexOf(search) !== -1) {结果 = [...结果，{ 名称:leaf.Name，标题:leaf.Title }]}如果(叶子.孩子){返回 _filter(leaf.children, search, textKey)} 别的 {返回空值}}}_过滤器(项目，搜索，文本键)返回结果}}

v-treeview 看起来像

where search is v-model to av-text-field` 作为要搜索的字符串，但出现以下错误.

vue.runtime.esm.js?5eb8:1888 TypeError: 迭代不可迭代实例的尝试无效.为了可迭代，非数组对象必须有一个 [Symbol.iterator]() 方法.

解决方案

您可以通过递归函数遍历树.您可以将数据结构视为一棵 M 树.我也使用了数据封装的闭包.

const data = [{Name: '名称级别 1',标题:'苹果'，孩子们: [{Name: 'Name Level 2',Title: 'Title Level 2',孩子们: [{Name: '名称级别 3',标题: '应用程序',儿童:空}]}]},{Name: '名称级别 1',标题:'苹果'，儿童:空}]const filter = (item, search, textKey) =>{让结果 = []const _filter = (item, search, textKey) =>{for(项目的const叶子){if (leaf[textKey].indexOf(search) !== -1) {结果 = [...结果，{名称:leaf.Name，标题:leaf.Title}]}叶子.孩子?_filter(leaf.children, search, textKey) : null}}_过滤器(项目，搜索，文本键)返回结果}console.log(filter(data, 'App', 'Title'))

I am trying to implement a search functionality for my Vuetify v-treeview component using a filter function for an Array of nested JS objects that looks like.

[
   {
      Name: 'Name Level 1',
      Title: 'Title Level 1',
      children: [
         {
            Name: 'Name Level 2',
            Title: 'Title Level 2',
            children: [ ... ]
         }
      ]
   },
...
]

Right now I have text field that v-models to a search and a filter function that looks like the one from Bara Koc's comment.

filter () {
      return (item, search, textKey) => {
        let result = []
        const _filter = (item, search, textKey) => {
          for (const leaf of item) {
            if (leaf[textKey].indexOf(search) !== -1) {
              result = [...result, { Name: leaf.Name, Title: leaf.Title }]
            }
            if (leaf.children) {
              return _filter(leaf.children, search, textKey)
            } else {
              return null
            }
          }
        }
        _filter(item, search, textKey)
        return result
      }
    }

And the v-treeview looks like

<v-treeview
      :items="treeItems"
      :search="search"
      :filter="filter"
      :open.sync="open"
      item-key="Name"
      dense
      style="max-height: 700px;"
      class="overflow-y-auto overflow-x-auto"\>

where search is v-modelto av-text-field` as the string to search, but I get the following error.

vue.runtime.esm.js?5eb8:1888 TypeError: Invalid attempt to iterate non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

解决方案

You can traverse the tree by a recursive function. You can think of the data structure as an M tree. Also I have used the closures for data encapsulation.

const data = [
   {
      Name: 'Name Level 1',
      Title: 'Apple',
      children: [
         {
            Name: 'Name Level 2',
            Title: 'Title Level 2',
            children: [{
              Name: 'Name Level 3',
              Title: 'Application',
              children: null
            }]
         }
      ]
   },
   {
      Name: 'Name Level 1',
      Title: 'Apple',
      children: null
   }
]

const filter = (item, search, textKey) => {
  let result = []
  const _filter = (item, search, textKey) => {
    for (const leaf of item) {
      if (leaf[textKey].indexOf(search) !== -1) {
        result = [...result, {Name: leaf.Name, Title: leaf.Title}]
      }
      leaf.children ? _filter(leaf.children, search, textKey) : null
    }
  }
  _filter(item, search, textKey)
  return result
}

console.log(filter(data, 'App', 'Title'))

这篇关于为 v-treeview 搜索嵌套的 JS 对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！