javascript - 如何在vue.js中根据id搜索过滤器

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

我想做的是仅渲染项目 id == 内容的详细信息 id。

Answer 1

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