javascript - 如何根据 id 在 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);
       })
      });
    },

我想要做的是只为项目 id == 内容 id 呈现详细信息。

标签： javascriptvue.jsvuejs2

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