Javascript 如何基于id在vue.js中搜索筛选器

我正在做一个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>

计算属性

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

我试图做的是仅呈现项目id==内容的详细信息 id.

使

FilteredList（）

成为一种方法，而不是为初学者计算的方法

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

let search='EMP2'；
让数据=[{
id:1，
标题：“Devsrc”，
内容：{
id:1，
详细信息：[“一个开发环境管理计划1”、“一个开发环境管理计划2”]
}
},
{
id:2，
标题：“Devsrc2”，
内容：{
id:2，
详情：[“两个开发环境管理计划1”、“两个开发环境管理计划2”]
}
},
{
id:3，
标题：“Devsrc3”，
内容：{
id:3，
详情：[“三个开发环境管理计划1”、“三个开发环境管理计划2”]
}
}
];
函数筛选器列表（id）{
让term=search.trim（）.toUpperCase（）；
让scoped=data.filter（item=>{return parseInt（item.content.id）==parseInt（id）}）；
如果（术语长度>0）{
返回范围为的.filter（项=>{
返回item.content.details.find（seek=>seek.match（search））；
});
}
返回范围；
}
控制台日志（过滤器列表（3））澄清：您正在呈现多个搜索字段，并且只想按其搜索字段过滤每个项目的详细信息？项目不会被过滤，所有标题都会被显示？是的，我确实错过了几件事，但我想我终于明白了你所做的事情的要点，这是我的最终答案。这个答案因其长度和内容而被标记为低质量。请为您的代码添加解释。
<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;
}

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