如何在vue.js中进行过滤 [英] how to do filters in vue.js
问题描述
我是vue.js的新手,所以我想在我的项目中应用过滤器.我尝试在过去2到3天内这样做.做到这一点.
i am new to vue.js.so i want to apply a filter thing in my project.i tried to do this from past 2 to 3 days..but i couldn't..can any one help me how to do this..
我有3个输入框,其中一个是experience,expected_ctc和profile_role,这取决于我要显示结果的这三个.
I have 3 input boxes one is experience,expected_ctc,and profile_role depending on these 3 i want to display the results..
这是我的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()
}
}
});
这是我在查看页面上的按钮:
here is my buttons from view page:
<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>
任何人都可以帮助我..
Can anyone help me..
先谢谢了.
推荐答案
好吧,让我们从一个较小的示例开始.假设您有候选人",一位候选人可能看起来像
Ok let's start with a smaller example. Lets say you have "Candidates" one one candidate might look like
{
name: 'John Doe',
expected_ctc: 'A',
experience: 'B',
profile_role_id: 1
}
从您的当前状态来看,我想说您有所有候选者在laravel返回的数组中.假设我们在您当前的模板中,其中有您的vue应用
From your current state I'd say you have all candidates in an array returned by laravel. Let's say we're in your current template where you have your vue app
<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模型绑定到 EXISTING 数据道具定义
- all candidates are in data -> candidates
- relevant (filtered) candidates are represented by the computed prop candidatelist
- inputs are bound with v-model to EXISTING data prop definitions
小提琴 https://jsfiddle.net/sLLk4u2a/
(搜索仅是精确且区分大小写的)
(Search is only exact and Case Sensitive)
这篇关于如何在vue.js中进行过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!