使用带有类别选择的关键字搜索字段

Question

我正在尝试创建一个搜索页面，用户可以在其中输入关键字并返回一组结果，如果需要，还可以选择按类别过滤。我可以让我的两个字段（输入和收音机）独立工作，但不能合并。因此，如果有人进行关键字搜索，则会显示这些结果。如果有人按类别进行申报，那么这些结果就会显示出来。虽然我不确定在选择类别后如何使用我的搜索框。我希望我的搜索框在类别结果中进行搜索。

HTML

    <div id="app" v-cloak>  
 <div class="container">
  <div class="row search-wrapper"> 
    <div class="col-xs-6 col-md-4">
      <div class="input-group stylish-input-group">
                    <input type="text" class="form-control"  placeholder="Filter by keyword"  v-model="search">
                    <span class="input-group-addon">
                        <button type="submit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>  
                    </span>
                </div>
    </div>    
    <div class="col-xs-12 col-md-8 text-right">
      <div data-toggle="buttons">
      <label class="btn btn-sm btn-all">
        <input type="radio" v-model="selectedCategory" value="All" /> All
      </label>
      <label class="btn btn-sm btn-hr">
        <input type="radio" v-model="selectedCategory" value="HR" /> Our People
      </label>
      <label class="btn btn-sm btn-finance">
        <input type="radio" v-model="selectedCategory" value="Finance" /> Finance
      </label>
     <label class="btn btn-sm btn-other">
        <input type="radio" v-model="selectedCategory" value="Other" /> Other
      </label>
</div>
    </div>    
  </div> <!-- search wrapper -->
  <div class="row sm-padding">
    <div v-for="form in filteredForms" class="col-xs-6 col-sm-4 sm-padding">
      <div class="box">
        <div class="form-type" v-bind:class="{ compClass }"></div>
        <div  class="text-right"><span class="glyphicon glyphicon-star"></span></div> 
        <div class="box__title"> {{ form.name }} </div>
        <div class="box__subtitle"> {{ form.category }} </div>
        <div class="box__link"> <a href="#" title="">Use this form</a></div>
      </div>
    </div>
    <div v-if="filteredForms.length === 0" >
      <div class="box box__empty"> No Match Found</div>
    </div>
  </div> <!-- results --> 
 </div> <!-- container -->
</div> <!-- #app -->

Vue JS

var vm = new Vue({
  el: '#app',
  data: {
      forms: [
        { name: 'Learning and Professional Development Record', category: 'HR', activeColor: 'red', views: 312},
        { name: 'New Vendor Request', category: 'Finance', activeColor: 'blue', views: 23121 },
        { name: 'On-call allowance', category: 'HR', activeColor: 'red', views: 231},
        { name: 'Overtime Claim', category: 'HR', activeColor: 'red', views: 443},
        { name: 'Alteration of Kindergarten Enrolment', category: 'Other', activeColor: 'yellow', views: 403},
        { name: 'Adjustment to vendor details', category: 'Finance', activeColor: 'blue', views: 8843}
      ],
      selectedCategory: 'All',
      search: '',
  },
  computed: {
    filteredForms: function() {
        var vm = this;
        var category = vm.selectedCategory;

       var forms = vm.forms.filter((form) => {
       return form.name.toLowerCase().includes(vm.search.toLowerCase());
          });

      if(category === "All") {
            return forms;
        } else {
          return vm.forms.filter(function(dept) {
          return dept.category === category;
            });
    }
    }
  }
})

笔：Codepen

Answer 1

您对给定类别的过滤器适用于整个列表，而不是按关键字过滤的列表：

filteredForms: function() {
    var vm = this;
    var category = vm.selectedCategory;

    var forms = vm.forms.filter((form) => {
        return form.name.toLowerCase().includes(vm.search.toLowerCase());
    });

    if(category === "All") {
        return forms;
    } else {
        // return vm.forms.filter(function(dept) {
        // replace with
        return forms.filter(function(dept) {
            return dept.category === category;
        });
    }
}

这是更新后的 Pen https://codepen.io/anon/pen/rpQzpz

Answer 2

我已更新您的计算值。 您的表单数组现在仅由一次数组迭代过滤。

const vm = new Vue({
  el: '#app',
  data: {
      forms: [
        { name: 'Learning and Professional Development Record', category: 'HR', activeColor: 'red', views: 312},
        { name: 'New Vendor Request', category: 'Finance', activeColor: 'blue', views: 23121 },
        { name: 'On-call allowance', category: 'HR', activeColor: 'red', views: 231},
        { name: 'Overtime Claim', category: 'HR', activeColor: 'red', views: 443},
        { name: 'Alteration of Kindergarten Enrolment', category: 'Other', activeColor: 'yellow', views: 403},
        { name: 'Adjustment to vendor details', category: 'Finance', activeColor: 'blue', views: 8843}
      ],
      selectedCategory: 'All',
      search: '',
  },
  computed: {
    filteredForms() {
      return this.forms.filter(dept => (dept.category === this.selectedCategory || this.selectedCategory === 'All') && dept.name.toLowerCase().includes(this.search.toLowerCase()));
    }
  }
});