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 dir.

Большое спасибо.

-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;
      });
    }
  }

Использовать filteredData во внешнем v-for

  <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