我的数据属性中包含以下元素
templateArray: [{"id":"7","itemId":"17520","itemName":"Arrow Bounce","thumbName":"ARROWBOUNCE","dateAdded":"2016-05-20 16:33:42","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/ArrowBounce-Scott\/arrowBounce.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":["LensFlare"]},{"id":"11","itemId":"38752","itemName":"Jitter Zoom Flash","thumbName":"JITTERZOOMFLASH","dateAdded":"2016-05-23 13:49:03","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/JitterZoomFlash-Scott\/JitterZoomFlash.aep","stillImageLocation":"2.66","categoryArray":["Sports"],"keywordArray":["Snow","Sparkles"]},{"id":"12","itemId":"12737","itemName":"Cloth Drop","thumbName":"CLOTHDROP","dateAdded":"2016-05-23 14:11:42","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/ClothDrop-Scott\/cloth drop.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"15","itemId":"73076","itemName":"Colorful Trans","thumbName":"COLORFULIMAGETRANS","dateAdded":"2016-05-27 10:16:56","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/ColorfulImageTrans-Scott\/ColorfulImageTrans.aep","stillImageLocation":"12.90","categoryArray":[],"keywordArray":["Water","Sparkles"]},{"id":"16","itemId":"18488","itemName":"Convex ½ Circle","thumbName":"CONVEXHALFCIRCLE","dateAdded":"2016-05-27 10:38:20","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/convexHalfCircle-Scott\/convex half circle.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"17","itemId":"67039","itemName":"Flag Swap","thumbName":"FLAGBACKSWAP","dateAdded":"2016-06-01 15:34:22","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/FlagBackSwap-Scott\/FlagBackSwap.aep","stillImageLocation":"5.83","categoryArray":[],"keywordArray":[]},{"id":"31","itemId":"70006","itemName":"Flag Raise","thumbName":"FLAGRAISE","dateAdded":"2016-06-03 11:13:37","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/FlagRaise-Scott\/flag.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"32","itemId":"58759","itemName":"Logo Dust Poof","thumbName":"LOGODUSTPOOF","dateAdded":"2016-06-03 11:25:34","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/LogoDustPoof-Scott\/LogoDustPoof.aep","stillImageLocation":"6.23","categoryArray":[],"keywordArray":[]},{"id":"33","itemId":"58967","itemName":"Flag Wave (Loop)","thumbName":"FLAGWAVE","dateAdded":"2016-06-03 11:35:49","renderTime":"75","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/FlagWave-Scott\/FlagWave.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"34","itemId":"65288","itemName":"Logo Splash One","thumbName":"LOGOSPLASHONE","dateAdded":"2016-06-03 15:34:19","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/LogoSplashOne-Scott\/LogoSplashOne.aep","stillImageLocation":"2.70","categoryArray":[],"keywordArray":[]},{"id":"35","itemId":"91246","itemName":"Metal Sparks","thumbName":"METALSPARKS","dateAdded":"2016-06-06 10:58:29","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/MetalSparks-Scott\/MetalSparks.aep","stillImageLocation":"4.63","categoryArray":[],"keywordArray":[]},{"id":"36","itemId":"57489","itemName":"Middle Stripe","thumbName":"MIDDLESTRIPEABA","dateAdded":"2016-06-06 12:25:41","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/MiddleStripe-Scott\/middleStripeABA.aep","stillImageLocation":"6.80","categoryArray":[],"keywordArray":[]},{"id":"37","itemId":"38402","itemName":"Water One","thumbName":"WATERONE","dateAdded":"2016-06-07 09:10:32","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/waterOne-Scott\/waterOne.aep","stillImageLocation":"8.83","categoryArray":[],"keywordArray":[]},{"id":"39","itemId":"81031","itemName":"Oval Text Flip","thumbName":"OVALTEXTFLIP","dateAdded":"2016-05-07 09:10:32","renderTime":"150","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/OvalTextFlip-Scott\/OvalTextFlip.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"40","itemId":"55143","itemName":"Close Up Text","thumbName":"CLOSEUPTEXT","dateAdded":"2016-07-05 09:10:32","renderTime":"85","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/CloseUpText-Scott\/CloseUpText\/CloseUpText.aep","stillImageLocation":"9.03","categoryArray":[],"keywordArray":[]},{"id":"41","itemId":"54335","itemName":"Electric Text Spin","thumbName":"ELECTRICTEXTSPIN","dateAdded":"2016-07-13 09:10:32","renderTime":"60","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/ElectricTextSpin-Scott\/ElectricTextSpin\/ElectricTextSpin.aep","stillImageLocation":"1.47","categoryArray":[],"keywordArray":[]},{"id":"42","itemId":"23761","itemName":"Digital Glitch","thumbName":"DIGITALGLITCH","dateAdded":"2016-09-19 09:10:32","renderTime":"60","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/DigitalGlitch-Scott\/DigitalGlitch.aep","stillImageLocation":"3.43","categoryArray":["Retail"],"keywordArray":[]},{"id":"43","itemId":"56465","itemName":"Takeover","thumbName":"TAKEOVER","dateAdded":"2016-09-30 14:10:32","renderTime":"80","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/TakeOver-Scott\/TakeoverProject\/takeoverproject.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"44","itemId":"17127","itemName":"Fire One","thumbName":"FIREONE","dateAdded":"2016-11-04 14:10:32","renderTime":"25","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/FireOne-Scott\/FireOne.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"53","itemId":"61617","itemName":"City Spin","thumbName":"CITYSPIN","dateAdded":"2016-11-09 14:17:15","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/CitySpin-Scott\/cityspin.aep","stillImageLocation":"8.933","categoryArray":["Church"],"keywordArray":[]},{"id":"56","itemId":"15528","itemName":"Magic Colors","thumbName":"MAGICCOLORS","dateAdded":"2016-11-10 13:10:26","renderTime":"30","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/MagicColors-Scott\/MagicColors.aep","stillImageLocation":"3.966","categoryArray":[],"keywordArray":[]},{"id":"61","itemId":"59239","itemName":"Quick and Simple","thumbName":"QUICKNSIMPLE","dateAdded":"2016-11-14 11:42:09","renderTime":"15","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/QuickNSimple-Scott\/QuickNSimple.aep","stillImageLocation":"2.033","categoryArray":[],"keywordArray":[]},{"id":"62","itemId":"82460","itemName":"Fast Blast","thumbName":"FASTBLAST","dateAdded":"2016-11-22 10:24:48","renderTime":"30","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/FastBlast-Scott\/FastBlast.aep","stillImageLocation":"9.666","categoryArray":[],"keywordArray":[]},{"id":"63","itemId":"83530","itemName":"Tunnel Spin","thumbName":"TUNNELSPIN","dateAdded":"2016-12-02 13:09:06","renderTime":"20","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/tunnelSpin-Scott\/tunnelSpin.aep","stillImageLocation":"2.9","categoryArray":[],"keywordArray":[]},{"id":"64","itemId":"94148","itemName":"Sparkle Splash","thumbName":"SPARKLESPLASH","dateAdded":"2016-12-20 11:23:26","renderTime":"45","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/SparkleSplash-Scott\/SparkleSplash.aep","stillImageLocation":"6.1","categoryArray":[],"keywordArray":[]},{"id":"69","itemId":"98640","itemName":"Gold Bling","thumbName":"GOLDBLING","dateAdded":"2017-01-10 08:16:41","renderTime":"30","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/GoldBling-Joe\/GoldBling.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"72","itemId":"94169","itemName":"Top Racer","thumbName":"TOPRACER","dateAdded":"2017-02-15 09:46:14","renderTime":"30","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/TopRacer-Scott\/TopRacer.aep","stillImageLocation":"7.833","categoryArray":[],"keywordArray":[]},{"id":"73","itemId":"55871","itemName":"Desert Sand","thumbName":"DESERTSAND","dateAdded":"2017-02-15 14:04:49","renderTime":"45","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/DesertSand-Scott\/DesertSand.aep","stillImageLocation":"10.46","categoryArray":[],"keywordArray":[]},{"id":"76","itemId":"18897","itemName":"Electric Storm","thumbName":"ELECTRICSTORM","dateAdded":"2017-02-23 12:43:08","renderTime":"45","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/ElectricStorm-Scott\/ElectricStorm.aep","stillImageLocation":"4.333","categoryArray":[],"keywordArray":[]},{"id":"78","itemId":"24052","itemName":"Court Smash","thumbName":"COURTSMASH","dateAdded":"2016-06-03 12:03:48","renderTime":"90","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/CourtSmash-Scott\/CourtSmash.aep","stillImageLocation":"5.933","categoryArray":[],"keywordArray":[]},{"id":"81","itemId":"43553","itemName":"Tile Flip","thumbName":"TILEFLIP","dateAdded":"2017-04-25 16:40:41","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/TileFlip-Chris\/TileFlip_Final\/TileFlip_Final.aep","stillImageLocation":"5","categoryArray":[],"keywordArray":[]},{"id":"88","itemId":"94677","itemName":"NEON LIGHTS","thumbName":"NEONLIGHTS","dateAdded":"2017-04-28 10:06:23","renderTime":"45","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/NEONLIGHTS-Joe\/NeonLights.aep","stillImageLocation":"2.53","categoryArray":[],"keywordArray":[]},{"id":"89","itemId":"64305","itemName":"Engine (Loop)","thumbName":"ENGINE","dateAdded":"2017-05-15 11:37:07","renderTime":"60","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/Engine-Scott\/Engine.aep","stillImageLocation":"4.67","categoryArray":[],"keywordArray":[]},{"id":"90","itemId":"11287","itemName":"Energy Core","thumbName":"ENERGYCORE","dateAdded":"2017-05-22 13:08:40","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/EnergyCore-Scott\/EnergyCore.aep","stillImageLocation":"6.73","categoryArray":[],"keywordArray":[]},{"id":"91","itemId":"48745","itemName":"Football Helmet","thumbName":"FOOTBALLHELMET","dateAdded":"2017-07-03 16:09:42","renderTime":"120","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/FootballHelmet-Scott\/FootballHelmet.aep","stillImageLocation":"7","categoryArray":[],"keywordArray":[]},{"id":"92","itemId":"85515","itemName":"Light Shine","thumbName":"LIGHTSHINE","dateAdded":"2017-08-18 14:09:50","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/LightShine-Scott\/LightShine.aep","stillImageLocation":"2","categoryArray":[],"keywordArray":[]},{"id":"93","itemId":"61876","itemName":"Baseball Dirt","thumbName":"BASEBALLDIRT","dateAdded":"2017-08-31 10:31:22","renderTime":"40","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/BaseballDirt-Scott\/BaseballDirt.aep","stillImageLocation":"7.27","categoryArray":[],"keywordArray":[]},{"id":"94","itemId":"48066","itemName":"Spooky","thumbName":"SPOOKY","dateAdded":"2017-09-01 13:58:36","renderTime":"15","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/Spooky-Jake\/Spooky.aep","stillImageLocation":"2","categoryArray":["Sports"],"keywordArray":[]},{"id":"95","itemId":"33584","itemName":"Get Loud","thumbName":"GETLOUD","dateAdded":"2017-09-07 11:58:02","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/GetLoud-Scott\/GetLoud.aep","stillImageLocation":"1.77","categoryArray":[],"keywordArray":[]},{"id":"96","itemId":"21713","itemName":"STAR BURST","thumbName":"STARBURST","dateAdded":"2017-10-19 18:20:29","renderTime":"15","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/StarBurst-Joe\/StarBurst.aep","stillImageLocation":"0","categoryArray":[],"keywordArray":[]},{"id":"97","itemId":"76554","itemName":"Magic Twirl","thumbName":"MAGICFINAL","dateAdded":"2017-10-26 11:19:52","renderTime":"20","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/Magic-Lillie\/Magic.aep","stillImageLocation":"825","categoryArray":[],"keywordArray":[]},{"id":"98","itemId":"64452","itemName":"Sports Car","thumbName":"SPORTSCAR","dateAdded":"2017-10-27 10:26:32","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/SportsCar-Scott\/SportsCar.aep","stillImageLocation":"14.77","categoryArray":[],"keywordArray":[]},{"id":"99","itemId":"15074","itemName":"Ice Logo","thumbName":"ICELOGO","dateAdded":"2017-11-01 11:53:48","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/IceLogo-Scott\/IceLogo.aep","stillImageLocation":"9.33","categoryArray":[],"keywordArray":["LensFlare"]},{"id":"100","itemId":"95033","itemName":"Hot Air Balloon","thumbName":"BALLOON","dateAdded":"2017-11-02 08:10:22","renderTime":"10","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/Balloon-Lillie\/Balloon.aep","stillImageLocation":"567","categoryArray":[],"keywordArray":[]},{"id":"243","itemId":"f0adeb21cfbfc7e1894debeef4cc6e22","itemName":"testingCrap","thumbName":"TESTINGCRAP","dateAdded":"2018-10-08 18:06:48","renderTime":"4","tested":"0","projectPath":"M:\/Projects\/Generics\/uploads\/testLocation","stillImageLocation":"0.13","categoryArray":["Sports","Holiday"],"keywordArray":["LensFlare"]}],
您可以看到每个模板的templateArray中都有一个，每个对象都包含一个categoryArray: "sports, holidays"这样的categoryArray元素
我也有一个filteredTemplateArray:[]
selectedCategoriesArray:[],
categories: ["Holiday","Sports","Misc","Automotive","Retail","Financial","Church","Community","Food"],
在此处显示该复选框的字体结束代码
<div class="form-group">
<h5>Categories</h5>
<label v-for="category in categories">
<input v-model="selectedCategories" type="checkbox" :value="category" v-on:click="selectedCategory=category; selectCategory">
{{category}}
</label>
</div>
最后，我有一个名为selectCategory的计算属性，它看起来像这样
selectCategory: function(){
if(this.selectedCategories.length!=0){
var templateArray=this.templateArray;
for (var i=0; i<this.selectedCategories.length; i++){
console.log(i);
return this.filteredTemplateArray=templateArray.filter((template)=>{
return template.categoryArray.includes(this.selectedCategories[i]);
})
}
}
}
我还通过此for循环显示模板信息
<div v-cloak v-bind:key="template.itemId + '_' + index" v-for="(template, index) in selectCategory" 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>
每次用户单击类别复选框时，都会运行此功能。我试图过滤模板数组并查找包含所选类别的项目。但是无论如何我总是在0处停止。当我添加多个项目时，它将不起作用。我需要拿走所有包含所选类别的项目，如果selectedCategories为空，请将filteredTemplateArray设置为templateArray，以便所有项目都显示出来。有关如何执行此操作的任何想法？
答案 0 :(得分：0)
按所示方法将for循环下移。我还创建了一个观察程序，它监视selectedCategories，当它发生更改时，运行一个方法，该方法可以过滤出重复项，并在selectedCategories.length == 0时将过滤后的类别设置回原始数组。这将创建一个向上计数的类别过滤器。例如，如果选中了运动和假期，它将仅显示运动中的所有项目和假日中的所有项目，这似乎比倒计时或显示仅在两者中都存在的项目更好。我使用app代替它作为变量，我将其称为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();
}
}