vuejs 循环的计算属性不会递增

Question

我的数据属性中有以下元素

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"]}],

如您所见，每个模板在模板数组中都有一个 每个对象都包含一个类别数组元素，如下所示categoryArray: "sports, holidays"

我也有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。当我添加多个项目时，它不起作用。我需要离开以获取包含所选类别的所有项目，如果选择类别为空，则将filteredTemplateArray设置为模板数组，以便显示所有项目。关于如何做到这一点的任何想法？

Answer 1

将方法中的 for 循环向下移动，如下所示。我还创建了一个监视 selectedCategory 的观察程序，当它发生变化时，运行一个方法过滤掉重复项，并在 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();
}
}