如何在 vue.js 中做过滤器

Question

我是 vue.js 的新手。所以我想在我的项目中应用一个过滤器。我在过去的 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));
  }
}

一般步骤：

• 所有候选人都在数据中 -> 候选人
• 相关（过滤）候选由计算的 prop 候选列表表示
• 输入与 v-model 绑定到 EXISTING 数据道具定义

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

（搜索仅准确且区分大小写）