[Vuejs]-Create a category filter with vuejs method

0👍

create a watcher that watches selectedCategories and when it changes run a method that filters out the duplicates and sets filtered categories back to the original array when the selectedCategories.length==0. This creates a category filter that counts up. for instance if sports and holidays are checked it will show only all items in sports and all items in holidays which seems to work better than counting down or showing the ones that only exist in both. I use app instead of this as its the variable i called my vue instance and because when you get deep into a function this does not always mean the app.

    watch: {
      selectedCategories(){
          this.categoryFilter();
      },
          sortBy(){
              this.sortTemplatesBy();
          }
    },
  methods: {
            sortTemplatesBy: function(){ 
      if(this.sortBy == "az") {
        this.filteredTemplateArray.sort(function(a,b) {
          if(a.itemName > b.itemName) {
            return 1;
          }
          if(a.itemName < b.itemName) {
            return -1;
          }
          return 0;
        });
      }

      if(this.sortBy == "dateAdded") {
        this.filteredTemplateArray.sort(function(a,b) {
          if(a.dateAdded < b.dateAdded) {
            return 1;
          }
          if(a.dateAdded > b.dateAdded) {
            return -1;
          }
          return 0;
        });
      }

      if(this.sortBy == "renderTime") {
        this.filteredTemplateArray.sort(function(a,b) {
          return parseInt(a.renderTime) - parseInt(b.renderTime);
        });
      }
    },
      categoryFilter: function(){
          if(app.selectedCategories.length!=0){
          app.filteredTemplateArray=[];
          var templateArray = app.templateArray;
          for(i=0; i<app.selectedCategories.length; i++){
              var filtered=templateArray.filter(function(template){
                  var currentCategory=app.selectedCategories[i];
                  console.log("this is current category"+currentCategory+"end currentCategory");
                  var returnValue=template.categoryArray.includes(currentCategory);
                  console.log("this is i"+i+"end i");
                  console.log("this is return value"+returnValue+"end return value");
                  return returnValue;
              });
              console.log(filtered);
              app.filteredTemplateArray=app.filteredTemplateArray.concat(filtered);

      }
          var uniqueArray=[];
          var allResultsArray=app.filteredTemplateArray;
          for(j=0; j<allResultsArray.length; j++){
              if(uniqueArray.indexOf(allResultsArray[j]) == -1){
                  uniqueArray.push(allResultsArray[j])
              }
          }
          app.filteredTemplateArray=uniqueArray;
      } else {app.filteredTemplateArray=app.templateArray;}
          this.sortTemplatesBy();
      }
  }

0👍

I am not too sure I understand the question, but.
Try creating a method for checking if a category is in the selectedCategories array

methods: {    
  isInSelectedCategories(category) {
    return this.selectedCategories.includes(category)
  }
  ...
}

In your template, you can do this check like so:

v-if="isInSelectedCategories(template.category)"

<!-- end search templates modal-->
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
    <div class="row">
        <h1 class="mainHeading">Creative Engine Templates</h1>
    </div>
    <div class="row">
        <div v-cloak v-bind:key="template.itemId + '_' + index" v-for="(template, index) in searchResults" v-if="isInSelectedCategories(template.category)" class="col-md-4">
            <div class="card">
                <video muted :src="'mysource/'+template.itemId+'/'+template.thumbName+'.mp4'" controls preload="none" controlsList="nodownload nofullscreen" :poster="'mysource/'+template.itemId+'/'+template.thumbName+'.jpg'" loop="loop"></video>
                <div class="card-body">

                    <p class="card-title">{{template.itemName}}</p>
                    <!--end card-title-->
                    <p v-show="displayCount==0" class="card-text">Please create a display to customize</p>
                    <!--end user has no display card-text-->
                    <p v-show="displayCount>0" class="card-text">Custom Text, Custom Colors, Upload Logo</p>
                    <!--end user has display card text-->
                    <p class="card-text">{{template.renderTime}} minutes</p>
                    <a href="#" v-show="loggedIn==true && displayCount>0" class="btn btn-primary btn-block">Customize</a>
                    <!--logged in and has display button-->
                    <a href="#" v-show="loggedIn==false" class="btn btn-primary btn-block" disabled>Customize</a>
                    <!--not logged in button-->
                    <a href="profile.php?showAddDisplayForm=1" v-show="loggedIn==true && displayCount==0" class="btn btn-primary btn-block">Create A Display</a>
                </div>
                <!--end card-body-->
            </div>
            <!--end card-->
        </div>
        <!-- end col-md-4-->
    </div>
👤Amanze

Leave a comment