фильтровать контент по категориям и ключевым словам в vuejs - PullRequest
Новая
       12

фильтровать контент по категориям и ключевым словам в vuejs

0 голосов
/ 28 сентября 2018

У меня довольно большая проблема. У меня есть следующий код, и у меня есть кнопки, чтобы попытаться отфильтровать видео по категории или ключевому слову, с которым они связаны.Однако я получаю дубликаты в методе фильтра, который я написал.что еще хуже, часть контента даже не отображается.

У меня есть следующие переменные в свойстве данных 

data :{
loggedIn: true,
displayCount:36,
searchQuery:'',
templateArray:[],
filteredTemplateArray:[],
categories: [],
keywords:[],
selectedCategories:[],
selectedKeywords:[], 
sortBy:''
},

, когда страница загружает templateArray и FilterTemplateArray равны

[{"id":«7», «itemId»: «17520», «itemName»: «Arrow Bounce», «thumbName»: «ARROWBOUNCE», «dateAdded»: «2016-05-20 16:33:42», «renderTime»:"30", "тестирование": "1", "projectPath": "М: /Projects/Generics/CreativeEngine/2016/ArrowBounce-Scott/arrowBounce.aep", "stillImageLocation": "2,66", "categoryArray": [], "keywordArray": ["LensFlare"]}, {"id": "11", "itemId": "38752", "itemName": "Вспышка с увеличением джиттера", "thumbName": "JITTERZOOMFLASH", "dateAdded"":" 2016-05-23 13:49:03 "," renderTime ":" 45 "," test ":" 1 "," projectPath ":" M: / Projects / Generics / CreativeEngine / 2016 / JitterZoomFlash-Scott/JitterZoomFlash.aep","stillImageLocation":"2.66","categoryArray":["Sports"],"keywordArray":["Snow","Sparkles"]},{"id":"12","itemId":" 12737 "," itemName ":" Drop Cloth "," thumbName ":" CLOTHDROP "," dateAdded ":" 2016-05-23 14:11:42 "," renderTime ":" 30 "," test":" 1" , "projectPath": "М: / Projects / Generics / CreativeEngine / 2016 / ClothDrop-Scott / ткань 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","тестирование": "1", "projectPath": "М: /Projects/Generics/CreativeEngine/2016/ColorfulImageTrans-Scott/ColorfulImageTrans.aep", "stillImageLocation": "12.90", "categoryArray": [], "keywordArray": [" Water "," Sparkles "]}, {" id ":" 16 "," itemId ":" 18488 "," itemName ":" Выпуклый круг ½ "," thumbName ":" CONVEXHALFCIRCLE "," dateAdded":" 2016-05-27 10:38:20 "," renderTime ":" 30 "," test ":" 1 "," projectPath ":" M: / Projects / Generics / CreativeEngine / 2016 / convxHalfCircle-Scott/ выпуклый полукруг.aep "," stillImageLocation ":" 2.66 "," categoryArray ": []," keywordArray ": []}, {" id ":" 17 "," itemId ":" 67039 "," itemName":" Замена флага "," thumbName ":" FLAGBACKSWAP "," dateAdded ":" 2016-06-01 15:34:22 "," renderTime ":" 30 "," test ":" 1 "," projectPath":" М: / Проекты / Дженерики / CreativeEngine / 2016 /FlagBackSwap-Скотт / FlagBackSwap.aep " "stillImageLocation": "5,83", "categoryArray": [], "keywordArray": []}, { "идентификатор": "31", "ItemId": "70006","itemName ":" Повышение флага "," thumbName ":" FLAGRAISE "," dateAdded ":" 2016-06-03 11:13:37 "," renderTime ":" 60 "," test ":" 1 ","projectPath ":" М: /Projects/Generics/CreativeEngine/2016/FlagRaise-Scott/flag.aep " "stillImageLocation": "2,66", "categoryArray": [], "keywordArray": []}, {" идентификатор":" 32 "," itemId ":" 58759 "," itemName ":" Пылесос с логотипом "," thumbName ":" LOGODUSTPOOF "," dateAdded ":" 2016-06-03 11:25:34 ","рендеринге ":" 30" , "тестирование": "1", "projectPath": "М: /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", "test": "1", "projectPath": "M: / Projects / Generics / CreativeEngine / 2016 / FlagWave-Скотт / FlagWave.aep " "stillImageLocation": "2,66", "categoryArray": [], "keywordArray": []}, {" идентификатор":" 34 "," itemId ":" 65288 "," itemName ":" Logo Splash One "," thumbName ":" LOGOSPLASHONE "," dateAdded ":" 2016-06-03 15:34:19 ","рендеринге ":" 45" , "тестирование": "1", "projectPath": "М: /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-0610:58:29" , "рендеринг": "60", "тестирование": "1", "projectPath": "М: /Projects/Generics/CreativeEngine/2016/MetalSparks-Scott/MetalSparks.aep", "stillImageLocation":" 4.63 "," categoryArray ": []," keywordArray ": []}, {" id ":" 36 "," itemId ":" 57489 "," itemName ":" Средняя полоса "," thumbName ": "MIDDLESTRIPEABA", "dateAdded": "2016-06-06 12:25:41", "renderTime": "60", "test": "1", "projectPath": "M: / Projects / Generics /CreativeEngine / 2016 / MiddleStripe-Скотт / 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 "," test ":"1" , "projectPath": "М: /Projects/Generics/CreativeEngine/2016/waterOne-Scott/waterOne.aep", "stillImageLocation": "8,83", "categoryArray": [], "keywordArray": []}, {"id": "39", "itemId": "81031", "itemName": "Перелистывание овального текста", "thumbName": "OVALTEXTFLIP", "dateAdded": "2016-05-07 09:10:32" , "рендеринг": "150", "тестирование": "1", "projectPath": "М: / Проекты / Непатентованный / CreativeEngine /2016 / OvalTextFlip-Скотт / OvalTextFlip.aep», "stillImageLocation": "2,66", "categoryArray": [], "keywordArray": []}, { "идентификатор": "40", "ItemId": "55143", "itemName": "Close Up Text", "thumbName": "CLOSEUPTEXT", "dateAdded": "2016-07-05 09:10:32", "renderTime": "85", "test": "1», "projectPath": "М: /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" , "рендеринг": "60", "тестирование": "1", "projectPath": "О: /Projects/Generics/CreativeEngine/2016/ElectricTextSpin-Scott/ElectricTextSpin/ElectricTextSpin.aep", "stillImageLocation": "1.47", "categoryArray": [], "keywordArray": []}, {"id": "42", "itemId": "23761", "itemName": "Цифровой сбой", "thumbName":"DIGITALGLITCH", "dateAdded": "2016-09-19 09:10:32", "renderTime": "60", "test": "1", "projectPath": "O: / Projects / Generics / CreativeEngine/ 2016 / DigitalGlitch-Скотт / DigitalGlitch.aep " "stillImageLocation": "3,43", "categoryArray": [ "розничной"], "keywordArray": []}, { "идентификатор": "43", "ItemId": "56465"," ITEMNAME":" Takeover "," thumbName ":" TAKEOVER "," dateAdded ":" 2016-09-30 14:10:32 "," renderTime ":" 80 "," test ":" 1 "," projectPath ": "О: /Projects/Generics/CreativeEngine/2016/TakeOver-Scott/TakeoverProject/takeoverproject.aep", "stillImageLocation": "2,66", "categoryArray": [], "keywordArray": []}, { "идентификатор":" 44 "," itemId ":" 17127 "," itemName ":" Fire One "," thumbName ":" FIREONE "," dateAdded ":" 2016-11-04 14:10:32 "," renderTime":" 25" , "тестирование": "1", "projectPath": "О: /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", "test": "1", "projectPath": "M: / Projects / Generics / CreativeEngine / 2016 / CitySpin-Scott / cityspin.aep " "stillImageLocation": "8,933", "categoryArray": [ "Церковь"], "keywordArray": []}, { "идентификатор": "56", "ItemId":" 15528 "," itemName ":" Волшебные цвета "," thumbName ":" MAGICCOLORS "," dateAdded ":" 2016-11-10 13:10:26 "," renderTime ":" 30 "," test ":"1" , "projectPath": "О: /Projects/Generics/CreativeEngine/2016/MagicColors-Scott/MagicColors.aep", "stillImageLocation": "3,966", "categoryArray": [], "keywordArray": []}, {"id": "61", "itemId": "59239", "itemName": "Быстрый и простой", "thumbName": "QUICKNSIMPLE", "dateAdded": "2016-11-14 11:42:09" , "рендеринг": "15", "тестирование": "1", "projectPath": "О: /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", "test": "1", "projectPath": "O: / Projects / Generics / CreativeEngine / 2016 /FastBlast-Скотт / FastBlast.aep " "stillImageLocation": "9,666", "categoryArray": [], "keywordArray": []}, { "идентификатор": "63", "ItemId": "83530","ITEMNAME ":" ТуннельSpin "," thumbName ":" TUNNELSPIN "," dateAdded ":" 2016-12-02 13:09:06 "," renderTime ":" 20 "," test ":" 1 "," projectPath ":" O: /Projects/Generics/CreativeEngine/2016/tunnelSpin-Scott/tunnelSpin.aep», "stillImageLocation": "2,9", "categoryArray": [], "keywordArray": []}, { "идентификатор": "64", "itemId": "94148", "itemName": "Sparkle Splash", "thumbName": "SPARKLESPLASH", "dateAdded": "2016-12-20 11:23:26", "renderTime": "45", "тестирование": "1", "projectPath": "О: /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 "," test ":" 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 "," test ":" 1 "," projectPaго ":" О: /Projects/Generics/CreativeEngine/2017/TopRacer-Scott/TopRacer.aep " "stillImageLocation": "7,833", "categoryArray": [], "keywordArray": []}, {" идентификатор":" 73 "," itemId ":" 55871 "," itemName ":" Песок пустыни "," thumbName ":" DESERTSAND "," dateAdded ":" 2017-02-15 14:04:49 "," renderTime":" 45" , "тестирование": "1", "projectPath": "О: /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", "test": "1", "projectPath": "O: / Проекты / Общие / CreativeEngine / 2017 / ElectricStorm-Scott / ElectricStorm.aep " "stillImageLocation": "4,333", "categoryArray": [], "keywordArray": []}, { "идентификатор": "78", "ItemId": "24052", "ITEMNAME":" СудSmash "," thumbName ":" COURTSMASH "," dateAdded ":" 2016-06-03 12:03:48 "," renderTime ":" 90 "," test ":" 1 "," projectPath ":" M: /Projects/Generics/CreativeEngine/2017/CourtSmash-Scott/CourtSmash.aep "" stillImageLocation ":" 5.933 "," categoryArray ": []," keywordArray ": []}, {" id ":" 81 "," itemId ":" 43553 "," itemName ":" Flile Flip "," thumbName":" TILEFLIP "," dateAdded ":" 2017-04-25 16:40:41 "," renderTime ":" 60 "," test ":" 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 "," test":" 1" , "projectPath": "О: /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-1511:37:07" , "рендеринг": "60", "тестирование": "1", "projectPath": "О: /Projects/Generics/CreativeEngine/2017/Engine-Scott/Engine.aep", "stillImageLocation":" 4.67 "," categoryArray ": []," keywordArray ": []}, {" id ":" 90 "," itemId ":" 11287 "," itemName ":" Ядро энергии "," чтmbName ":" ENERGYCORE "," dateAdded ":" 2017-05-22 13:08:40 "," renderTime ":" 30 "," test ":" 1 "," projectPath ":" M: / Projects /Дженерики / CreativeEngine / 2017 / EnergyCore-Скотт / EnergyCore.aep», "stillImageLocation": "6,73", "categoryArray": [], "keywordArray": []}, { "идентификатор": "91", "ItemId": "48745", "itemName": "Футбольный шлем", "thumbName": "FOOTBALLHELMET", "dateAdded": "2017-07-03 16:09:42", "renderTime": "120", "test": "1", "projectPath": "М: /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" , "рендеринг": "30", "тестирование": "1", "projectPath": "М: /Projects/Generics/CreativeEngine/2017/LightShine-Scott/LightShine.aep", "stillImageLocation":»2" , "categoryArray": [], "keywordArray": []}, { "идентификатор": "93", "ItemId": "61876", "ITEMNAME": "БейсболDirt "," thumbName ":" BASEBALLDIRT "," dateAdded ":" 2017-08-31 10:31:22 "," renderTime ":" 40 "," test ":" 1 "," projectPath ":" M: /Projects/Generics/CreativeEngine/2017/BaseballDirt-Scott/BaseballDirt.aep», "stillImageLocation": "7,27", "categoryArray": [], "keywordArray": []}, { "идентификатор": "94", "itemId": "48066", "itemName": "Spooky", "thumbName": "SPOOKY", "dateAdded": "2017-09-01 13:58:36", "renderTime": "15","тестирование": "1", "projectPath": "М: /Projects/Generics/CreativeEngine/2017/Spooky-Jake/Spooky.aep", "stillImageLocation": "2", "categoryArray": [ "Спорт"], "keywordArray": []}, {"id": "95", "itemId": "33584", "itemName": "Get Loud", "thumbName": "GETLOUD", "dateAdded": "2017-09-07 11:58:02 "," renderTime ":" 45 "," test ":" 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", "test": "1", "projectPath": "M: / Projects/ГенRICS / CreativeEngine / 2017 / StarBurst-Джо / StarBurst.aep», "stillImageLocation": "0", "categoryArray": [], "keywordArray": []}, { "идентификатор": "97", "ItemId": "76554", "itemName": "Magic Twirl", "thumbName": "MAGICFINAL", "dateAdded": "2017-10-26 11:19:52", "renderTime": "20", "test": "1", "projectPath": "М: /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" , "рендеринг": "60", "тестирование": "1", "projectPath": "М: /Projects/Generics/CreativeEngine/2017/SportsCar-Scott/SportsCar.aep", "stillImageLocation":»14.77 "," categoryArray ": []," keywordArray ": []}, {" id ":" 99 "," itemId ":" 15074 "," itemName ":" Логотип Ice "," thumbName ":" ICELOGO"," dateAdded ":" 2017-11-01 11:53:48 "," renderTime ":" 45 "," test ":" 1 "," projectPath ":" M: / Projects / Generics / CreativeEngine / 2017/IceLogo-Scott/IceLogo.aep","stillImageLocation":"9.33","categoryArray":[],"keywordArray":["LensFlare"]},{"id ":" 100 "," itemId ":" 95033 "," itemName ":" Воздушный шар "," thumbName ":" BALLOON "," dateAdded ":" 2017-11-02 08:10:22 ","рендеринг": "10", "тестирование": "1", "projectPath": "М: /Projects/Generics/CreativeEngine/2017/Balloon-Lillie/Balloon.aep", "stillImageLocation": "567",»categoryArray ": []," keywordArray ": []}, {" идентификатор ":" 231" , "ItemId": "bb39f253c6c237ecf5d86ced4e8bcdec", "ITEMNAME": "тест", "thumbName": "TEST", "dateAdded": "2018-09-28 18:35:08", "renderTime": "4", "test": "0", "projectPath": "M: / Projects / Generics / uploads / testLocation", "stillImageLocation": "0,13", "categoryArray": [ "Спорт", "Разное", "Праздник"], "keywordArray": { "0": "LensFlare", "2": "Снег", "5": "Вода"}}]

категории выглядит следующим образом

[" Holiday "," Sports "," Misc "," Automotive "," Retail "," Financial ", "Церковь", "Сообщество", "Еда"]

ключевые слова такие же, как категории, только разные значения

при нажатии кнопки selectedCategories начинает заполняться массивомэто выглядит так:

0: "Holiday"

selectedKeywords как это (если это кнопка с ключевым словом вместо категории):

0: "lensFlare"

когда кнопка нажата, FilterTemplates выглядит следующим образом в инспекторе vue: 

> 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"

У меня есть следующий метод фильтрации элементов при нажатии, но он не работает, как бы вы изменили его так, чтобы все элементыпоказать и элементы правильно отфильтрованы?

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

здесь передний конец цикла, чтобы показать видео 

 <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>
                            <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-->
...