如何在VUEJS 2中的同一表格上使用过滤器和搜索栏

Question

这是我的代码：

<div class="job-filter">
  <h3>Filter <img id="icon-filter" @click="showfilter" :style="{ 'display': display.btn_show_filter }" src="../assets/recruit/angle-down-svgrepo-com.svg" alt=""> <img id="icon-close-filter" :style="{ 'display': display.btn_close_filter }" @click="closefilter" src="../assets/recruit/close-svgrepo-com.svg" alt=""></h3>
  <div  class="radio-group" id="group-filter" :style="{ 'display': display.group_filter }" >
    <div class="radio-check" v-for="(check, index) in checks" :key="index">
      <input type="radio" :id="index"  name="fav_language" :value="check" v-model="selected" >
      <label  :for="index">{{check}}</label><br>
    </div>
  </div>
  </div>
  <div class="search">
    <div class="search-top flex-wrap">
      <div class="search-input">
        <input type="search" v-model="search" placeholder="Nhập từ khóa để tìm kiếm">
        <button @click="search"><img src="../assets/recruit/search.svg" alt=""></button>
      </div>
    </div>
    <div class="job-item"  v-for="(item, index) in filtered" :key="index">
   <a href=""><h3 class="mleft-27">{{item.position}}</h3></a>     
    <div>
      <img src="../assets/recruit/years.svg" alt="">
      <b>{{item.exprerience}}</b>
    </div>
    <div>
      <img src="../assets/recruit/luong.svg" alt="">
      <b>{{item.salary}}</b>
    </div>
    <div>
      <img src="../assets/recruit/diadiem.svg" alt="">
      <b>{{item.headequarters}}</b>
    </div>
    <h6>{{item.createdAt}}</h6>
</div>
<ul>
  <li>{{item.content1}}</li>
  <li>{{item.content2}}</li>
  <li>{{item.content3}}</li>
</ul>

我已经完成了过滤器，但是我在构建搜索栏上遇到困难.......我正在使用过滤的复选框来处理过滤器，但是我仍然没有弄清楚如何使同时工作并展示同一位置。

我的逻辑代码：

export default {
  data(){
     return{     
       checks:['All','Developer','Tester', 'Designer', 'Support',],
       infojobs:[{
                  genres: 'Developer',
                  position:'Senior Java Engineer, Big Data',
                  exprerience:'3-5 Years',
                  salary:'',
                  headequarters:'',
                  content1:'1',
                  content2:'2
                  createdAt: "3"
                 },
                 {
                  genres: 'Designer',
                  position:'Creative professional designer ',
                  exprerience:'1-3 Years',
                  salary:'',
                  headequarters:'',
                  content1:'',
                  content2:'1',
                  content3:'2',
                  createdAt: "3"
                  }
        ],
        selected: 'All',
      }
    },
    computed: {
      filtered() {
        console.log(this.selected)
        if(this.selected=='All'){
            return this.infojobs
        }
        else{ 
          return this.infojobs.filter(i => i.genres === this.selected)
        }
    },                
  },

我希望处理搜索栏并过滤而不会冲突，希望得到一些帮助，非常感谢...

Answer 1

您可以尝试使用观察者。

代码说明：

• 在data（）中定义一个额外的变量 showjobs
• 放置watcher on selected变量，该变量将显示 功能
• Watcher在搜索变量上，仅在用户输入超过2个字符时触发搜索功能，如果没有，我们将显示默认过滤的作业，它才会触发搜索 。此外，我们可以使用debounce在搜索作业时添加500ms的延迟。

---

watch: {
 selected(newVal) {
   if (newVal === "All") {
     this.showJobs = this.infojobs;
   } else {
     this.showJobs = this.infojobs.filter((i) => i.genres === newVal);
   }
 },

 search: _.debounce(function (newVal) {
   if (newVal.length > 2) {
     let searchedJobs = this.showJobs.filter((job) =>
       job.position.toLowerCase().includes(newVal.toLowerCase())
     );

     this.showJobs = searchedJobs;
   } else {
     if (this.selected === "All") {
      this.showJobs = this.infojobs;
     } else {
      this.showJobs = this.infojobs.filter((i) => i.genres === this.selected);
    }
   }
 }, 500)
}

注意：您需要从组件中的lodash库中导入<代码> debounce 。

---

edit ：如您在评论中提到的要求，您可以在searchJob函数方法 下使用相同的逻辑，因此它触发了单击按钮上的“搜索”功能，是的，不要忘记删除Watcher search变量。

searchJob() {
   if (this.search.length > 2) {
     let searchedJobs = this.showJobs.filter((job) =>
       job.position.toLowerCase().includes(this.search.toLowerCase())
     );

     this.showJobs = searchedJobs;
   } else {
     if (this.selected === "All") {
      this.showJobs = this.infojobs;
     } else {
      this.showJobs = this.infojobs.filter((i) => i.genres === this.selected);
    }
   }
 },

Answer 2

computed: {
  filtered() {
    let finalFilter = [...this.infojobs];
    console.log(this.selected)
    if (this.selected !== 'All') {
      finalFilter =this.infojobs.filter(i => i.genres === 
    }
    if (this.search.trim()) {
      finalFilter  = finalFilter.filter((i) => Object.values(i).some(v => v.toLowerCase().includes(this.search.toLowerCase())
    }
    return finalFiter
  },                
},

您不需要两者。只需使用条件即可。