How can i use computed property in v-for - vue.js

I penerate list for vue,second list in wrapper,left and right,
computed: {
currentIndex () {
for (let i = 0; i < this.listHeight.length; i++) {
let height1 = this.listHeight[i];
console.log(height1);
let height2 = this.listHeight[i + 1];
if (!height1 || (this.scrollY < height1 && this.ScrollY >= height2)) {
return i;
}
}
return 0;
}
this code have a question,height1 and height2 not movement,why is regular two variable inner loop.


like this:
<span v-for="(index,key) in currentIndex" :key="key">
{{index}}
</span>
you should edit element and content depending on what do you want to do in your template.

Related

Angular - can't sum point

I want to sum point but now I try write function and console.log(total) but it happens is 'undefined'
app.ts
saveTasks() {
if (this.tasksToSave.length != 0) {
for (let i = 0; this.tasksToSave.length > i; i++) {
this.ticketService.setAddTasks(
this.id,
this.tasksToSave[i]
)
}
}
}
sumPoint() {
let total = 0
if (this.tasksToSave.length != 0) {
for (let i = 0; i < this.tasksToSave.length; i++) {
total = total + this.tasksToSave[i].point
}
}
}
app.html
total = {{total}}

Put the total variable in the export block in the component like below:
export class YourComponent implements OnInit {
...
total: number = 0;
...
sumPoint() {
if (this.tasksToSave.length != 0) {
for (let i = 0; i < this.tasksToSave.length; i++) {
this.total = this.total + this.tasksToSave[i].point
}
}
}
...
}

Vuejs counter condition not working when value is reset

I'm trying to implement a datepicker where you flick through the months.
The objective is to reset the month counter when it reaches -1 or 11.
Counting up, it works just fine, but counting down it does not reset the value once it reaches -1 and I don't understand why.
<template>
<div id="app">
<button #click="count(1)">Count up</button>
<button #click="count(-1)">Count down</button>
<button #click="reset">reset</button>
<div>Value: {{ value }}</div>
</div>
</template>
methods: {
reset(){ this.value = 5 },
count(num) {
var x = this.value + num;
console.log(x)
if (x < 0) {
this.value = 11;
}
if (x > 11) {
this.value = 0;
} else {
this.value = x;
}
}
},
data() {
return {
value: 5,
};
},
Here's the code sandbox

Update your code to
if (x < 0) {
this.value = 11;
} else if (x > 11) {
this.value = 0;
} else {
this.value = x;
}
And it will work :)
The reason is that for now when the value is less than 0 it enters the first condition (if (x < 0)) and then it still enters the else so this.value is set to x.

How to render incrementally images taken from the database

In a project which I am doing there is a part which involves rendering images taken from the database. One image is rendered without a problem, but when I try to incrementally render all the rows from the database, there starts to be a problem:
main.component.ts
homeDetails() {
this.info.getHomeDetails().subscribe(
gethomedetails => {
this.id = gethomedetails[0].id;
this.picByte = gethomedetails[0].picByte;
// for ( let i=0; i<=gethomedetails.length; i++) {
// this.id = homedetails[0].id;
this.picByte = gethomedetails[i].picByte;
this.id = gethomedetails[i].id;
console.log("id" + this.id);
// this.picByte = homedetails[i].picByte;
// }
this.retrievedImage = 'data:image/jpeg;base64,' + this.picByte;
// }
console.log("retrievedimage" + this.retrievedImage);
// for (let i=0; i<=this.id; i++) {
// console.log("id" + i);
// }
// for (let i=0; i<=this.id; i++) {
// this.picByte = homedetails[i].picByte;
// this.retrievedImage = 'data:image/jpeg;base64,' + this.picByte;
// console.log("retrievedimage" + this.retrievedImage);
// }
// this.images = homedetails
}
)
// return this.domSanitizer.bypassSecurityTrustResourceUrl(this.retrievedImage);
}
main.component.html
<img [src]="retrievedImage"> works just for one file
Could you please point me out how I should do it?
Thank you.

You could do this in a simple manner:
homeDetails() {
this.info
.getHomeDetails()
.subscribe(data =>
this.images = data.map(data => (
{
id: data.id,
src: 'data:image/jpeg;base64,' + data.picByte
}
)
)
}
And then in the HTML
<div *ngFor="let image of images">
<img [src]="image.src">
</div>

Dom-repeat not re-rendering when Array sorts

I have an array property:
arrayList: {
type: Array,
value:[
{id:"1",candy:"Reeces"},
{id:"1",candy:"M&M"},
{id:"1",candy:"KitKat"},
{id:"1",candy:"Twizzlers"}
]
}
and a boolean property
forceRerender: {
type: Boolean,
value: false
}
I call them in a Dom-Repeat to populate the HTML:
<template is="dom-repeat" as="candy" items="[[getCandyList(arrayList, forceRerender)]]">
<div id="[[candy.id]]" class="candy-row" data="[[candy]]" on-tap="selectCandy">
</template>
The selectCandy() function looks like this:
selectCandy(event) {
let arr = this.arrayList;
for(let j = 0, i = 0; j < arr.length; j++) {
if(arr[j].select) {
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
i++;
}
}
this.set('forceRerender', !this.forceRerender);
}
And my getter:
getCandyList(arr,forceRerender) {
return arr;
}
My selectCandy() effectively rearranges the arrayList, but does not visually update the HTML content to represent this. I can't seem to figure out why.
I've made a separate array and used that to change values. I've made a local array and pushed to that and returned it. I've rewritten the order in which things are done. Separated the sections up multiple times to review each portion individually.
I've been at this for at least 3 hours and I'm lost. Can't anyone explain to me here what I'm doing wrong?

This below example could give you some inspiration. As far as I understood, you want to move up (top) the selected item.
Demo
<template is="dom-repeat" items="[[getCandyList(arrayList, forceRerender)]]" as="candy">
<paper-item on-tap="selectCandy"> <div id="[[candy.id]]" class="candy-row" data="[[candy]]"> [[candy.id]] - [[candy.candy]]</div>
</paper-item>
</template>
And the Js may look like:
selectCandy(e) {
let temp = this.arrayList;
//In order to observable change in dom-repeat
this.set('arrayList', []);
temp.splice(e.model.index, 1);
temp.unshift(e.model.candy);
this.set("arrayList", temp);
this.set('forceRerender', !this.forceRerender);
}
You may re-organize the array with other types.

I have discovered the solution:
getCandyList(arr,forceRerender) {
let rowList = [];
for(let j = 0, i = 0; j < arr.length; j++) {
if(arr[j].select) {
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
i++;
}
}
arr.forEach(function(object) {
rowList.push(object);
}.bind(this));
return rowList;
}
and
selectCandy(event) {
this.set('forceRerender', !this.forceRerender);
}
moral of the story here is do all the stuff you wanna do to your objects and arrays in the get function.

filter content with categories and keywords in vuejs

I am having a pretty big problem I have the following code and I have buttons to try to filter videos based on what category or keyword they have associated with them. However I am getting duplicates in the filter method I wrote. to make matters worse some of the content doesn't even display.
I have the following variables in my data property
data :{
loggedIn: true,
displayCount:36,
searchQuery:'',
templateArray:[],
filteredTemplateArray:[],
categories: [],
keywords:[],
selectedCategories:[],
selectedKeywords:[],
sortBy:''
},
when thea page loads templateArray and filteredTemplateArray are both equal to
[{"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":"231","itemId":"bb39f253c6c237ecf5d86ced4e8bcdec","itemName":"test","thumbName":"TEST","dateAdded":"2018-09-28
18:35:08","renderTime":"4","tested":"0","projectPath":"M:/Projects/Generics/uploads/testLocation","stillImageLocation":"0.13","categoryArray":["Sports","Misc","Holiday"],"keywordArray":{"0":"LensFlare","2":"Snow","5":"Water"}}]
categories looks like this
["Holiday","Sports","Misc","Automotive","Retail","Financial","Church","Community","Food"]
keywords is the same as categories just different values
when a button is clicked selectedCategories begins to fill up with an array that looks like this :
0: "Holiday"
selectedKeywords like this (if its a keyword button instead of a category):
0: "lensFlare"
when a button gets pressed filteredTemplates looks like this in the vue inspector:
> filteredTemplateArray:Array[1] 0:Object categoryArray:Array[3]
> 0:"Sports" 1:"Misc" 2:"Holiday" dateAdded:"2018-09-28 18:35:08"
> id:"231" itemId:"bb39f253c6c237ecf5d86ced4e8bcdec" itemName:"test"
> keywordArray:Object
> projectPath:"M:/Projects/Generics/uploads/testLocation" renderTime:"4"
> stillImageLocation:"0.13" tested:"0" thumbName:"TEST"
I have the following method filtering the items when pressed but its not working how would ya'all change it so that all the items show up and items are filtered properly?
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]) {
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);
},
heres the front end loop to show the videos
<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="mysource" 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>
Customize
<!--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-->
Create A Display
</div>
<!--end card-body-->
</div>
<!--end card-->
</div>
<!-- end col-md-4-->
</div>
<!--end row-->