vuejsのフィルタと検索の追加方法

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

も選択を私はテーブルの上に特定の名前をクリックしたとき、それはその人のプロフィールを開くべきであるとの機能を追加したい：

その後、

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

そして、フィルタリングされたデータをループするには、V-用に変更：<tr v-for="profile in filteredProfiles">

Answer 2

あなたはおそらく代わりにprofilesData

の計算されたリストを返すことができます

これにはさまざまな方法がありますが、これは単なる1つの方法です。

あなたはAPIにそのsearchStringを渡して結果リストを返すことができます。それはすべて、それには 本当に必要ですか？