Question

当links.items包含特定字符串时，我正在尝试过滤类别。

    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 }}</pre>
      </div>

      <!-- Level 2 -->
      <div class="card-content" v-for="item in value.items" :key="item.id">
        <p>
          <a :href="item.url" target="_blank">{{ item.name }}</a>
        </p>
        <p> {{ item.info }} </p>
      </div>
    </div>
  `,
  data: {
    links,
    search: ''
  },
  computed: {
    filteredLinks () {
      return this.links.filter(links => {
        return links.items.toLowerCase().includes(this.search.toLowerCase())
      })
    }
  }
});

new Vue({
  el: '#app'
});

我认为这真的很简单，但是我没有让它运行...有人可以帮忙吗？谢谢！

Answer 1

我从 json文件导入了链接，并弄清楚了过滤像这样：

//li/p[following-sibling::h1[.="Demarcation"]]

使用搜索字段过滤项目

1 个答案: