Filter 如何在vuejs中添加筛选器和在表中搜索？

我正在学习vue js并构建一个SPA，我想知道如何使用输入标记添加过滤器和搜索。我还想添加一个功能，当我单击表上的某个特定名称时，它会打开该人员的配置文件，这也是一个全选功能

<template>
  <div class="animated fadeIn">
    <input type="text" placeholder="Enter Name" v-model="searchText">
    <table class="table table-striped">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>College Name</th>
                  <th>College City</th>
                  <th>Level Name</th>
                  <th>Submitted</th>
                  <th>Pending</th>
                  <th>Completed</th>
                  <th>Approved</th>
                  <th>Rejected</th>

                </tr>
              </thead>
              <tbody>
                <tr v-for="profile in profilesdata">
                  <td>{{profile.first_name}}</td>
                  <td>{{profile.college_name}}</td>
                  <td>{{profile.college_city}}</td>
                  <td>{{profile.level_name}}</td>
                  <td>{{profile.submitted}}</td>
                  <td>{{profile.pending}}</td>
                  <td>{{profile.complete}}</td>
                  <td>{{profile.approve}}</td>
                  <td>{{profile.rejected}}</td>
                </tr>
              </tbody>
            </table>
  </div>
</template>

<script>
export default{
    name: 'profiles',

    data () {
      return{
        profilesdata: []
      }
    },

    created:function(){
      this.loadlike()
    },
    methods:{
      loadlike:function(){

        this.$http.get('/api/profiles').then(function (res) {
          this.profilesdata = res.body
          console.log(53+this.profiles)
        })}}}
</script>

名称
学院名称
大学城
级别名称
提交
悬而未决的
完整的
经核准的
拒绝
{{profile.first{u name}}
{{简介.学院名称}
{{简介.大学城}
{{profile.level_name}
{{profile.submitted}}
{{profile.pending}
{{profile.complete}
{{profile.approve}
{{profile.rejected}}
导出默认值{
名称：'profiles'，
数据（）{
返回{
档案数据：[]
}
},
已创建：函数（）{
this.loadlike（）
},
方法：{
loadlike:function（）{
这是.http.get（'/api/profiles'）。然后（函数（res）{
this.profilesdata=res.body
console.log（53+this.profiles）
})}}}

您可以对过滤后的数据进行计算：

computed: {
    filteredProfiles() {
        return this.profilesdata.filter(profile => {
            // TODO filter profile with this.searchText
        })
    }
}

---

然后将v-for更改为在过滤数据上循环：

您可以对过滤数据进行计算：

computed: {
    filteredProfiles() {
        return this.profilesdata.filter(profile => {
            // TODO filter profile with this.searchText
        })
    }
}

---

然后将v-for更改为在过滤数据上循环：

您可能会返回computed list而不是profilesData

<template>
 ...
 <input type="text" placeholder="Enter Name" v-model="searchText">
 ...
 <tr v-for="profile in computedProfilesData">
 ...
</template>
<script>
  export default{
  ...
  data () {
    return {
    ...
    // - you need info for searchText
    searchText: ''
    }
  }
  ...
  computed: {
     computedProfilesData(){
       let searchString = this.searchText;
       return this.profilesdata.filter((profile) => {
          // example
          profile.first_name.indexOf(searchString) !== -1;
       })
     }
  }

</script>

...
...
...
导出默认值{
...
数据（）{
返回{
...
//-您需要搜索文本的信息
搜索文本：“”
}
}
...
计算：{
computedProfilesData（）{
让searchString=this.searchText；
返回此.profilesdata.filter（（配置文件）=>{
//范例
profile.first_name.indexOf（searchString）！=-1；
})
}
}

有很多不同的方法可以做到这一点，这只是其中之一

您可以将该搜索字符串传递给API并返回结果列表，一切都到此为止

---

您真正需要什么。

您可能会返回计算列表而不是profilesData

<template>
 ...
 <input type="text" placeholder="Enter Name" v-model="searchText">
 ...
 <tr v-for="profile in computedProfilesData">
 ...
</template>
<script>
  export default{
  ...
  data () {
    return {
    ...
    // - you need info for searchText
    searchText: ''
    }
  }
  ...
  computed: {
     computedProfilesData(){
       let searchString = this.searchText;
       return this.profilesdata.filter((profile) => {
          // example
          profile.first_name.indexOf(searchString) !== -1;
       })
     }
  }

</script>

...
...
...
导出默认值{
...
数据（）{
返回{
...
//-您需要搜索文本的信息
搜索文本：“”
}
}
...
计算：{
computedProfilesData（）{
让searchString=this.searchText；
返回此.profilesdata.filter（（配置文件）=>{
//范例
profile.first_name.indexOf（searchString）！=-1；
})
}
}

有很多不同的方法可以做到这一点，这只是其中之一

您可以将该搜索字符串传递给API并返回结果列表，一切都到此为止

---

你真正需要什么。

这适用于搜索栏如果我需要多个过滤器该怎么办搜索栏如果我需要多个过滤器该怎么办