Question

我正在学习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>

Answer 1

你可能会返回计算列表而不是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>

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

您可以将该searchString传递给API并返回结果列表，这一切都可以实现你到底需要什么。

Answer 2

您可以为过滤后的数据计算：

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

然后更改v-for以循环过滤数据：<tr v-for="profile in filteredProfiles">

如何在vuejs中添加过滤器和搜索表？

2 个答案: