Фильтр товаров с полем поиска

Question

Я пытаюсь фильтровать категории, когда links.items содержит определенную строку.

<code>    const links = [
    {
        id: 1,
        category: 'Category 1',
        items: [
            {
                id: 1,
                name: 'Link1',
                url: 'https://#',
                info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            },
            {
                id: 2,
                name: 'Link2',
                url: 'https://#',
                info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            }
        ]
    },
    {
        id: 2,
        category: 'Category2',
        items: [{
            id: 1,
            name: 'Link1',
            url: 'https://#',
            info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        }]
    },
    {
        id: 3,
        category: 'Category3',
        items: [{
            id: 1,
            name: 'Link1',
            url: 'https://#',
            info: ''
        }]
    }
]

Vue.component('link-component', {
  template: `
    <div>
      <h4>Links</h4>

      <!-- Search -->
      <input type="text" v-model="search" append-icon="search" placeholder="Search"></input>

      <!-- Level 1 -->
      <div v-for="value in filteredLinks" :key="value.id">
          <pre>{{ value.category }}

{{item.name}}

{{item.info}}

`, данные: {ссылки, поиск: ''}, вычислено:{FilterLinks () {return this.links.filter (links => {return links.items.toLowerCase (). includes (this.search.toLowerCase ())})}}});новое Vue ({el: '#app'});

Я думаю, что это действительно просто, но у меня не получается ... Может кто-нибудь помочь?Спасибо!

Answer 1

Я импортирую ссылки из json-файла и разобрался до фильтра их вот так:

filteredLinks () {
  return this.links.filter((link) => {
    return link.items.some((item) => {
      return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  })
}