<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