php - vuejs 类别和关键字过滤器

Question

大家好，我已经用了一段时间了，我正在尝试使用按钮按类别和关键字过滤我的模板。我有一个使用 filter 方法的 vuejs 应用程序。它工作得很好，除非我没有选择关键字并开始选择多个类别。例如，我有一个名为 test 的模板，它与运动类别和假期类别相关联。当两者都被选中时，我得到一个副本。我真的很接近这个我已经在这部分停留了大约一个星期了。我意识到这是很多代码，但它干净、可读并且没有意义，除非我给你一个概述。

这是一个显示代码的 fiddle https://jsfiddle.net/rshba6jz/

这是前端代码

<?php require_once('header.php');
require_once('database.php');

if ($result = $mysqli->query("SELECT t.*, GROUP_CONCAT(c.category) categories, GROUP_CONCAT(k.keyword) keywords FROM dataclayTemplates t LEFT JOIN dataclayCategoryLink cl JOIN dataclayCategories c ON cl.categoryId=c.id ON t.id=cl.templateId LEFT JOIN dataclayKeywordLink kl JOIN dataclayKeywords k ON kl.keywordId=k.id ON t.id=kl.templateId GROUP BY t.id"))
{
  while($row = $result->fetch_array(MYSQLI_ASSOC)) {
    if($row["categories"] == null) {
      $row["categoryArray"] = [];
    } else {
      $row["categoryArray"] = array_unique(explode(",",$row["categories"]));
    }
    unset($row["categories"]);
    if($row["keywords"] == null) {
      $row["keywordArray"] = [];
    } else {
      $row["keywordArray"] = array_unique(explode(",",$row["keywords"]));
    }
    unset($row["keywords"]);
    $templateArray[] = $row;
  }
}

$result->close();

$categoryArray = array();

if ($result = $mysqli->query("SELECT category FROM dataclayCategories;"))
{
  while($row = $result->fetch_array(MYSQLI_ASSOC)) {
    array_push($categoryArray, $row['category']);
  }
}

$result->close();

$keywordArray = array();

if ($result = $mysqli->query("SELECT keyword FROM dataclayKeywords;"))
{
  while($row = $result->fetch_array(MYSQLI_ASSOC)) {
    array_push($keywordArray, $row['keyword']);
  }
}

$result->close();

$mysqli->close();


?>
<div v-cloak id="templates" class="container content">

    <div class="col-lg-3 visible-lg-block hidden-md" id="SearchTemplatesLargeContainer">
        <form role="form" role="form" onsubmit="return false">
            <div class="form-group">
                <label for="searchBar">Search</label>
                <input v-model="searchQuery" type="text" placeholder="Search Tempates" id="searchBar" autocomplete="off" class="form-control">
            </div>
            <div class="form-group">
                <label>Sort By</label>
                <select v-model="sortBy" class="form-control">
          <option value="renderTime">Render Time</option>
          <option value="az">A-Z</option>
          <option value="dateAdded">Newest</option>
        </select>
            </div>
            <div class="form-group">
                <h5>Categories</h5>
                <div v-for="category in categories" :class="category + 'Button'" v-on:click.prevent="selectCategory(category)" class="btn btn-default categoryButton">
                    {{category}}
                </div>
            </div>
            <div class="form-group">
                <h5>Keywords</h5>
                <div v-for="keyword in keywords" :class="keyword + 'Button'" v-on:click.prevent="selectKeyword(keyword)" class="btn btn-default categoryButton">
                    {{keyword}}
                </div>
            </div>
        </form>
    </div>
    <!--end lg template menu col-lg-3-->

    <!--search templates modal-->
    <div class="modal fade" role="dialog" id="searchTemplatesModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">X</button>
                    <h2 class="modal-title">Search Templates</h2>
                    <!--end .modal-title-->
                </div>
                <!--end modal-header-->
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label>Search</label>
                            <input v-model="searchQuery" type="text" placeholder="Search Tempates" autocomplete="off" class="form-control">
                        </div>
                        <!--.end searchQuery-->
                        <div class="form-group">
                            <label>Sort By</label>
                            <select v-model="sortBy" class="form-control">
                                <option value="renderTime">Render Time</option>
                                <option value="az">A-Z</option>
                                <option value="dateAdded">Newest</option>
                        </select>
                        </div>
                        <!--end sortBy-->
                        <div class="form-group">
                            <h5>Categories</h5>
                            <div v-for="category in categories" :class="category + 'Button'" v-on:click.prevent="selectCategory(category)" class="btn btn-default categoryButton">
                                {{category}}
                            </div>
                        </div>
                        <!--end categorys-->
                        <div class="form-group">
                            <h5>Keywords</h5>
                            <div v-for="keyword in keywords" :class="keyword + 'Button'" v-on:click.prevent="selectKeyword(keyword)" class="btn btn-default categoryButton">
                                {{keyword}}
                            </div>
                        </div>
                        <!--end keywords-->
                    </form>
                </div>
                <!--end .modal-body-->

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">Search</button>
                </div>
                <!--end .modal-footer-->
            </div>
            <!--end .modal-content-->
        </div>
        <!--end .modal-dialog-->
    </div>
    <!-- end search templates modal-->
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <h1 class="mainHeading">Templates</h1>
        </div>
        <div class="row">
            <div v-cloak v-bind:key="template.itemId + '_' + index" v-for="(template, index) in searchResults" class="col-md-4">
                <div class="card">
                    <video muted :src="mysource" controls preload="none" controlsList="nodownload nofullscreen" :poster="mysouce" 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>
        <!--end row-->
    </div>
    <!--end col-lg-9 col-md-12 col-sm-12 col-xs-12-->
</div>
<!--end templates app-->
<script>
var app = new Vue({
  el: '#templates',
  data: {
    loggedIn: false,
    displayCount:'<?php if(isset($_SESSION['displayCount'])){echo $_SESSION['displayCount'];} else{echo 0;}?>',
    searchQuery:'',
    templateArray: <?php echo json_encode($templateArray); ?>,
    filteredTemplateArray: <?php echo json_encode($templateArray); ?>,
    categories: <?php echo json_encode($categoryArray); ?>,
    selectedCategories: [],
    keywords: <?php echo json_encode($keywordArray); ?>,
    selectedKeywords: [],
    sortBy: ''
  },
  computed: {
      searchResults: function(){
          return this.filteredTemplateArray.filter((template)=>{
            return template.itemName.toLowerCase().includes(this.searchQuery.toLowerCase());
          })
      }
  },
  created: function() {
    this.loggedIn=<?php if(isset($_SESSION['loggedIn'])){echo $_SESSION['loggedIn'];} else {echo 0;}?>;
    this.filteredTemplateArray.sort(function(a,b) {
      return parseInt(a.renderTime) - parseInt(b.renderTime);
    });
  },
  watch: {
    sortBy: 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);
        });
      }
    }
  },
  mounted: function(){
      this.sortBy="renderTime";
  },
  methods: {
    filter: function() {
      var filteredCategoryArray = [];
      var filteredKeywordArray = [];
      if(this.selectedCategories.length != 0) {
        for(var i = 0; i < this.templateArray.length; i++) {
          for(var j = 0; j < this.selectedCategories.length; j++ ) {
            for(var k = 0; k < this.templateArray[i].categoryArray.length; k++ ) {
              if(this.templateArray[i].categoryArray[k] == this.selectedCategories[j]) {
                  console.log(this.templateArray[i].categoryArray[k]);
                  console.log(this.selectedCategories[j]);
                var arrayDuplicate = false;
                for(var l = 0; l < filteredKeywordArray.length; l++) {
                  if(filteredCategoryArray[l].id == this.templateArray[i].id) {
                    arrayDuplicate = true;
                  }
                }
                if(arrayDuplicate == false) {
                  filteredCategoryArray.push(this.templateArray[i]);
                }
              }
            }
          }
        }
      } else {
        for(var i = 0; i < this.templateArray.length; i++){
          filteredCategoryArray.push(this.templateArray[i]);
        }
      }

      if(this.selectedKeywords.length != 0) {
        for(var i = 0; i < filteredCategoryArray.length; i++) {
          for(var j = 0; j < this.selectedKeywords.length; j++ ) {
            for(var k = 0; k < filteredCategoryArray[i].keywordArray.length; k++ ) {
              if(filteredCategoryArray[i].keywordArray[k] == this.selectedKeywords[j]) {
                var arrayDuplicate = false;
                for(var l = 0; l < filteredKeywordArray.length; l++) {
                  if(filteredKeywordArray[l].id == filteredCategoryArray[i].id) {
                    arrayDuplicate = true;
                  }
                }
                if(arrayDuplicate == false) {
                  filteredKeywordArray.push(filteredCategoryArray[i]);
                }
              }
            }
          }
        }
      } else {
        for(var i = 0; i < filteredCategoryArray.length; i++){
          filteredKeywordArray.push(filteredCategoryArray[i]);
        }
      }
      if(this.sortBy == "az") {
        filteredKeywordArray.sort(function(a,b) {
          if(a.itemName > b.itemName) {
            return 1;
          }
          if(a.itemName < b.itemName) {
            return -1;
          }
          return 0;
        });
      }

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

      if(this.sortBy == "renderTime") {
        filteredKeywordArray.sort(function(a,b) {
          return parseInt(a.renderTime) - parseInt(b.renderTime);
        });
      }

      this.filteredTemplateArray = filteredKeywordArray;
      $('html,body').scrollTop(0);
    },
    selectCategory: function(category) {
      var categoryButton = $('.' + category + 'Button');
      categoryButton.toggleClass('categoryButtonSelected');
      if(this.selectedCategories.includes(category)){
        var array = [];
        for(var i = 0; i < this.selectedCategories.length; i++) {
          if(this.selectedCategories[i] != category) {
            array.push(this.selectedCategories[i]);
          }
        }
        this.selectedCategories = array;
      } else {
        this.selectedCategories.push(category);
      }
      this.filter();
    },
    selectKeyword: function(keyword) {
      var categoryButton = $('.' + keyword + 'Button');
      categoryButton.toggleClass('categoryButtonSelected');
      if(this.selectedKeywords.includes(keyword)){
        var array = [];
        for(var i = 0; i < this.selectedKeywords.length; i++) {
          if(this.selectedKeywords[i] != keyword) {
            array.push(this.selectedKeywords[i]);
          }
        }
        this.selectedKeywords = array;
      } else {
        this.selectedKeywords.push(keyword);
      }
      this.filter();
    }
  }
});
</script>

我有当模板被点击时，这是在 vue 检查器中传递到我的 filteredTemplateArray 的内容。如果有多个具有相同 ID 的项目(在本例中为 223，我希望它们被过滤掉，这样就没有重复项了。它在使用关键字时工作正常，但在使用类别时失败。我确信它很简单，但我真的被卡住了，需要一些帮助会很棒。

    filteredTemplateArray:Array[1]
0:Object
categoryArray:Array[3]
0:"Misc"
1:"Holiday"
2:"Sports"
dateAdded:"2018-10-01 17:54:22"
id:"233"
itemId:"fb41a01641bb2e769db412d3b21c2e3e"
itemName:"test"
keywordArray:Array[2]
0:"Snow"
1:"LensFlare"
projectPath:"M:/Projects/Generics/uploads/testLocation"
renderTime:"4"
stillImageLocation:"0.13"
tested:"0"
thumbName:"TEST"

Answer 1

创建一个监视 selectedCategories 的观察器，当它发生变化时，运行一个方法来过滤掉重复项，并在 selectedCategories.length==0 时将过滤后的类别设置回原始数组。这将创建一个向上计数的类别过滤器。例如，如果选中运动和假期，它将仅显示运动中的所有项目和假期中的所有项目，这似乎比倒计时或显示仅存在于两者中的项目更好。我使用 app 而不是 this 作为我调用 vue 实例的变量，因为当你深入研究一个函数时，这并不总是意味着应用程序。

    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();
      }
  }