Как искать фильтр в vue.js по идентификатору

Question

Я делаю проект Vue.Он содержит div, и он зацикливает заголовок и данные.Внутри div есть поисковый фильтр и контент, который отображается в тегах p.Теги p также циклы.

Вот код:

<div>
    <div v-for="(item) in data" :key="item.id">
        <div>{{item.title}}</div>
        <input type="text" v-model="search" />
        <div v-for="(content, j) in filteredLists" :key="j">
            <p v-for="(con, k) in content" :key="k">{{con}}</p>
        </div>
    </div>
</div>

вот данные

search: "",
data: [
    {
        id: 1,
        title: "Devsrc",
        content: {
            id: 1,
            details: ["ONE_DEV_EMP1", "ONE_DEV_EMP2"]
        }
    },
    {
        id: 2,
        title: "Devsrc2",
        content: {
            id: 2,
            details: ["TWO_DEV_EMP1", "TWO_DEV_EMP2"]
        }
    },
    {
        id: 3,
        title: "Devsrc3",
        content: {
            id: 3,
            details: ["THREE_DEV_EMP1", "THREE_DEV_EMP2"]
        }
    }
]

вычисляемое свойство

filteredLists() {
      return this.data.map(item => {
       return item.content.details.filter(detail => {
           return detail.toLowerCase().match(this.search);
       })
      });
    },

Я пытаюсь отобразить детали только для идентификатора элемента == идентификатора содержимого.

Answer 1

filteredLists() {
  return data.filter(
    function(item) {
      return item.content.details.find(
        function(detail) {
          return detail.toLowerCase().match(this.search)
        }.bind(this)
      )
    }.bind(this)
  )
}

Answer 2

Сделайте filteredLists() методом, а не вычисленным для начинающих.

<div>
    <div v-for="(item) in data" :key="item.id">
        <div>{{item.title}}</div>
        <input type="text" v-model="search" />
        <div v-for="(content, j) in filteredLists(item.id)" :key="j">
            <p v-for="(con, k) in content" :key="k">{{con}}</p>
        </div>
    </div>
</div>

---

function filteredLists(id) {

  let term = this.search.trim().toUpperCase();
  let scoped = this.data.filter(item => { return parseInt(item.content.id) === parseInt(id) });

  if(term.length > 0) {
    return scoped.filter(item => {
      return item.content.details.find(seek => seek.match(search));
    });
  }

  return scoped;
}

let search = 'EMP2';

let data = [{
    id: 1,
    title: "Devsrc",
    content: {
      id: 1,
      details: ["ONE_DEV_EMP1", "ONE_DEV_EMP2"]
    }
  },
  {
    id: 2,
    title: "Devsrc2",
    content: {
      id: 2,
      details: ["TWO_DEV_EMP1", "TWO_DEV_EMP2"]
    }
  },
  {
    id: 3,
    title: "Devsrc3",
    content: {
      id: 3,
      details: ["THREE_DEV_EMP1", "THREE_DEV_EMP2"]
    }
  }
];

function filteredLists(id) {

      let term = search.trim().toUpperCase();
      let scoped = data.filter(item => { return parseInt(item.content.id) === parseInt(id) });

      if(term.length > 0) {
        return scoped.filter(item => {
          return item.content.details.find(seek => seek.match(search));
        });
      }

      return scoped;
}

console.log(filteredLists(3));