javascript - Vue.js 嵌套 for 循环与搜索过滤器

Question

我有一个带有嵌套对象的 JSON 对象，我正在迭代该对象以提取数据。一切工作正常，但我想添加一个搜索/过滤器实现，以便在嵌套 for 的第二层上完成搜索。环形。我已经有点工作了，但我没有收到任何返回的数据。这是一个例子:

https://codesandbox.io/s/vue-template-s9t9o

HelloWorld 组件是进行搜索/过滤的地方。正如您所看到的，它在通过 searchFilter 方法后不会输出其余数据。

要使其在没有搜索/过滤器的情况下工作，请在 line #6 上更改以下内容:

来自:<div class="contentSingle" v-for="(c, i) in searchFilter" :key="i">

至:<div class="contentSingle" v-for="(c, i) in cont" :key="i">

任何人都可以想到我可以做些什么来完成这项工作？我需要按每个 content 内的元素进行过滤在主数据对象内。您可以在 FauxData/dataContent.js 中找到数据对象。目录。

非常感谢。

-S

Answer 1

您应该使用方法而不是计算:

  methods: {
    filterValue(content) {
      return content.filter(item => {
        let itemUpper = item.content.toUpperCase();
        let searchUpper = this.search.toUpperCase();
        return itemUpper.indexOf(searchUpper) > -1;
      });
    }
  }

然后在 HTML 代码中:

  <section id="content">
    <input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
    <div v-for="(cont, index) in content" :key="index" class="contentWrapper">
      <h1>{{ index }}</h1>
      <div class="contentSingle" v-for="(c, i) in filterValue(cont)" :key="i">
        <h3>{{ c.title }}</h3>
        <div v-html="c.content"></div>
      </div>
    </div>
  </section>

已更新

如果您想隐藏空白部分，请使用计算值:

  computed: {
    filteredData() {
      return Object.keys(this.content).reduce((a, cKey) => {
        const data = this.filterValue(this.content[cKey]);
        if (data.length) {
          a[cKey] = data;
        }
        return a;
      }, {});
    }
  },
  methods: {
    filterValue(content) {
      return content.filter(item => {
        let itemUpper = item.content.toUpperCase();
        let searchUpper = this.search.toUpperCase();
        return itemUpper.indexOf(searchUpper) > -1;
      });
    }
  }

在外部 v-for 中使用 filteredData

  <section id="content">
    <input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
    <div v-for="(cont, index) in filteredData" :key="index" class="contentWrapper">
      <h1>{{ index }}</h1>
      <div class="contentSingle" v-for="(c, i) in cont" :key="i">
        <h3>{{ c.title }}</h3>
        <div v-html="c.content"></div>
      </div>
    </div>
  </section>

演示 codepen