如何做vue.js中的過濾器

Question

我是vue.js.so的新手我想在我的項目中應用一個過濾器的東西。我試圖從過去的2到3天這樣做..但我不能。 。可任何一個可以幫助我如何做到這一點..

我有3個輸入框一個是經驗，expected_ctc和profile_role根據這3個我想要顯示的結果..

這是我的js頁面：

const app = new Vue({ 
    el: '#app', 
    data() { 
    return { 
     page: 0, 
     itemsPerPage: 3, 
    } 
}, 
components: { Candidate }, 
    methods: { 
    //custom method bound to page buttons 
    setPage(page) { 
    this.page = page-1; 
    this.paginedCandidates = this.paginate() 
    }, 
    paginate() { 
    return this.filteredCandidates.slice(this.page * this.itemsPerPage, this.page * this.itemsPerPage + this.itemsPerPage) 
    }, 
}, 


computed: { 
    //compute number of pages, we always round up (ceil) 
    numPages() { 
    console.log(this.filteredCandidates) 
    return Math.ceil(this.filteredCandidates.length/this.itemsPerPage); 
    }, 
    filteredCandidates() { 
    //filter out all candidates that have experience less than 10 
    const filtered = window.data.candidates.filter((candidate) => { 
     if(candidate.experience === 5) { 
     return false; 
     } 

     return true; 
    }) 
    console.log(filtered); 
    return filtered; 
    }, 
    paginedCandidates() { 
    return this.paginate() 
    } 
} 
}); 

這裏是從視圖頁我的按鈕：

<div class="container"> 

<b>Experience:</b><input type="text" v-model="experience" placeholder="enter experience"> 

<b>Expected CTC:</b><input type="text" v-model="expected_ctc" placeholder="enter expected ctc"> 

<b>Profile Role:</b><input type="text" v-model="profile_role_id" placeholder="enter role"> 


<input type="button" name="search" value="search" > 

</div> 

誰能幫我...

在此先感謝..

Answer 1

好吧，讓我們先從一個小例子。比方說你有「考生」一個一個候選人看起來像

{ 
    name: 'John Doe', 
    expected_ctc: 'A', 
    experience: 'B', 
    profile_role_id: 1 
} 

從你目前的狀態我說你有所有考生在通過laravel返回數組。比方說，我們在當前的模板，你有你的VUE應用

<div id="app"> 
    <!-- lets start with one filter (to keept it clean) --> 
    <input type="text" v-model="experienceSearch"/> 

    <ul class="result-list"> 
    <li v-for="result in candidatelist">{{ result.name }}</li> 
    </ul> 
</div> 

現在到了腳本

// always init your v-model bound props in data 
// usually you wouldn't take the candidates from the window prop. However, to keep it easy for you here I will stick to this 
data: function() { 
    return { 
    experienceSearch: '', 
    candidates: window.data.candidates 
    } 
}, 

// the list that is displayed can be defined as computed property. It will re-compute everytime your input changes 
computed: { 
    candidatelist: function() { 
    // now define how your list is filtered 
    return this.candidates.filter(function(oCandidate) { 
     var matches = true; 

     if (this.experienceSearch) { 
      if (oCandidate.experience != this.experienceSearch) { 
       matches = false; 
      } 
     } 

     // here you can define conditions for your other matchers 

     return matches; 
    }.bind(this)); 
    } 
} 

一般步驟：

• 所有候選人都在數據 - >候選人
• 相關（過濾的）候選人由計算的候選人列表
• 個輸入綁定的V模型現有數據道具定義

小提琴https://jsfiddle.net/sLLk4u2a/

（搜索僅僅是準確，區分大小寫）