vue.js 如何筛选具有对象的多个巢状数组

7gs2gvoe  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(129)

我有一个嵌套了对象数组的数组,问题是我不知道如何一次通过title过滤整个属性。

目前,对title属性的过滤对我来说很好,但它只对顶级有效,也就是说,它在elems数组内部不起作用。
目前,我的代码如下所示

state: {
    searchValue: "",

    categories: [
        {
            title: "about",
            open: false,
            elems: [{ title: "portfolio" }],
        },
        {
            title: "services",
            open: false,
            elems: [{ title: "jobs" }],
        },
    ],
},

getters: {
    categories(state) {
        return state.categories.filter(item => {
            return item.title.toLowerCase().includes(state.searchValue.toLowerCase())
        })
    }
}

最后,为了更好地理解,我想说明当用户将单词aboutportfolio输入到input中时,我想要实现什么,例如,我想要显示第一个对象如果输入了单词jobs或services,我想要显示第二个对象,但同样,第一级的title属性对我有效。但是elems数组中的title属性不起作用。

brgchamk

brgchamk1#

你可以试着用some作嵌套数组:

let searchValue = "about"

const categories = [
  {title: "about", open: false, elems: [{ title: "portfolio" }],},
  {title: "services", open: false, elems: [{ title: "jobs" }, { title: "about" }],},
]

function cats(state) {
  return state.filter(item => {
    return item.title.toLowerCase().includes(searchValue.toLowerCase()) ||
      item.elems.some(e => e.title.toLowerCase().includes(searchValue.toLowerCase()))
  })
}

console.log(cats(categories))

相关问题