• 1400/03/17

filter gallery :

 <div class="container-fluid">
     <form>
      <div class="form-group col-md-3">
      <label for="inputState"> Referenzen filtern nach:</label>
      <select  class="form-control">
       <option selected v-on:click="setFilter('ALL')"
       v-bind:class="{active:currentFilter === 'ALL'}"
       >Einsatzberreich</option>
        <option v-on:click="setFilter('room')"
        v-bind:class="{active:currentFilter === 'room'}">Room</option>
        <option v-on:click="setFilter('shopping')"
         v-bind:class="{active:currentFilter === 'shopping'}">Shopping</option>
      </select>
      </div>
     </form>
   </div>
   <div class="container">
     <transition-group name="list" class="list" tag="section">
      <div class="image" v-for="item in items" v-bind:key="item.id">
       <div v-if="currentFilter === item.category || currentFilter === 'ALL'" >
        <img :src="item.src" alt="item.id">
          <div class="img-info">
            <h4>{{item.text}}</h4>
         </div>
       </div>
     </div>
     </transition-group>
   </div>
   ---------------
   data:function(){
       return{
          currentFilter: 'ALL',
      items: [
         {id: 1,src:require('@/assets/images/gallery/Office (6).png'),text: 'EA Sports, Gamescom',category:'room'},
         {id: 2,src:require('@/assets/images/gallery/Gym (23).png'),text:'Hochzeitsmesse Köln 2020', category:'shopping'},
         {id: 3,src:require('@/assets/images/gallery/Gym (1).png'),text:'Matilda Graus',category:'room'},
         {id:4,src:require('@/assets/images/gallery/Industrial (38).png'),text:'Gartenstube, Wuppertal',category:'shopping'},
         {id:5,src:require('@/assets/images/gallery/Retail (45).png'),text:'Kids Zone',category:'room'},
         {id:6,src:require('@/assets/images/gallery/boxing club.png'),text:'Kindergarten Wuppertal',category:'shopping'},
         {id:7,src:require('@/assets/images/gallery/Industrial (16).png'),text:'Kindergarten Wuppertal',category:'room'},
         {id:8,src:require('@/assets/images/gallery/Retail (55).png'),text:'Bistro Hotels',category:'shopping'},
         {id:9,src:require('@/assets/images/gallery/Retail (56).png'),text:'IKEA Düsseldorf',category:'room'},
         /**
         {id:10,src:require('@/assets/images/gallery/Industrial (8).png'),text:'Engelmann + Sola',tags:[ 'Room', 'all']},
         {id:11,src:require('@/assets/images/gallery/Industrial (31).png'),text:'Gerta Braun',tags:[ 'shopping', 'all']},
         {id:12,src:require('@/assets/images/gallery/IMG_0942.png'),text:'BRICOFLOR',tags:['all', 'Room']},
         {id:13,src:require('@/assets/images/gallery/Retail (34).png'),text:'Stadtbücherei Wuppertal',tags:['all', 'shopping']},
         {id:14,src:require('@/assets/images/gallery/Retail (63).png'),text:'Bed & Breakfast Belfast',tags:['all', 'Room']},
         {id:15,src:require('@/assets/images/gallery/Industrial (48).png'),text:'karl krause',tags:['all', 'Room']},
         {id:16,src:require('@/assets/images/gallery/Gym (15).png'),text:'Müller & Seiberts GmbH',tags:['all', 'shopping']}, */
      ],
     /** currentTag: 'all'*/ 
       } 
   },
   components: {
      banner,
   },
  
   methods:{
      setFilter:function(filter){
         this.currentFilter = filter;
      }
   }

salam, man mikhastam filter gallery ba category benevisam, vali code na ejra mishe va na error mide. mishe moshkelesh ro behem begid. mamnonam

 

 

 

 

 

logo-samandehi