循环的vuejs计算属性不会增加
Posted
技术标签:
【中文标题】循环的vuejs计算属性不会增加【英文标题】：vuejs computed property for loop wont increment 【发布时间】：2019-03-21 04:21:24 【问题描述】：我的数据属性中有以下元素
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 元素，例如 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。当我添加多个项目时，它不起作用。我需要获取包含所选类别的所有项目，如果 selectedCategories 为空，请将filteredTemplateArray 设置为templateArray，以便显示所有项目。关于如何做到这一点的任何想法？
【问题讨论】：
【参考方案1】：在方法中将 for 循环移到下面，如图所示。我还创建了一个监视 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();
【讨论】：
以上是关于循环的vuejs计算属性不会增加的主要内容，如果未能解决你的问题，请参考以下文章