[Vuejs]-Vuejs computed property for loop wont increment

by

0👍

✅

move the for loop lower in the method as shown. I also created 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();
      }
  }

Leave a comment