Vue.js與搜索過濾器嵌套循環

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上的演示