v-show within a v-for loop - show only clicked option - vue.js

Question

I have a v-for loop set up there is a show button within the loop, when I click this, at the moment it opens all the hidden divs, I want it to open only the relevant one thats clicked. Maybe there is another way to do this or a better way I have been reading that v-show might net be suited to be used inside a loop.
<div id="app" class="container">
<form>
<div v-for="item in filterOptions" :class="{ activeclass: isActive }">
<dl>
<dt>
<!--- click to show --->
<button #click="toggle(item)" #click.self.prevent>{{item.name}}</button>
</dt>
<!--- show this --->
<dd v-show="isActive" :id="item.name">
<button v-for="option in item.values" v-on:click="option.selected = !option.selected" type="button" class="btn btn-primary" :class="{'active' : option.selected}">
{{option.name}}
</button>
</dd>
</dl>
</div>
</form>
<div v-for="item in products">
<div>
<h5>
{{item.name}}
</h5>
<h6>{{item.region}}</h6>
<a>View</a>
</div>
</div>
</div>
var main = new Vue({
el: '#app',
data: {
products: [
{
name: "davy",
region: "Highland",
category: "Single Cask"
},
{
name: "bill",
region: "Islay",
category: "New releases"
},
{
name: "shena",
region: "Highland",
category: "Remarkable Regional Malt"
}
],
filterOptions: [
{
name: 'Region',
isActive: false,
values: [
{
name: 'Highland',
selected : false
},
{
name: 'Speyside',
selected : false
},
{
name: 'Islay',
selected : false
}
]
},
{
name: 'Price',
isActive: false,
values: [
{
name: '£1-50',
selected : false
},
{
name: '£51-100',
selected : false
},
]
},
{
name: 'Category',
isActive: false,
values: [
{
name: 'Single Cask',
selected : false
},
{
name: 'Remarkable Regional Malt',
selected : false
},
{
name: 'New releases',
selected : false
}
]
}
],
isHidden: true,
isActive: false
},
methods: {
toggle: function () {
this.isActive = !this.isActive;
}
}
})

Answer 1

I hope this will help you
window.onload = function() {
new Vue({
el: '#app',
data: {
products: [
{
name: "davy",
region: "Highland",
category: "Single Cask"
},
{
name: "bill",
region: "Islay",
category: "New releases"
},
{
name: "shena",
region: "Highland",
category: "Remarkable Regional Malt"
}
],
filterOptions: [
{
name: 'Region',
isActive: false,
values: [
{
name: 'Highland',
selected : false
},
{
name: 'Speyside',
selected : false
},
{
name: 'Islay',
selected : false
}
]
},
{
name: 'Price',
isActive: false,
values: [
{
name: '£1-50',
selected : false
},
{
name: '£51-100',
selected : false
},
]
},
{
name: 'Category',
isActive: false,
values: [
{
name: 'Single Cask',
selected : false
},
{
name: 'Remarkable Regional Malt',
selected : false
},
{
name: 'New releases',
selected : false
}
]
}
],
isHidden: true,
isActive: false,
selectedName: ''
},
methods: {
toggle: function (item) {
this.selectedName = item.name
}
}
})
}
.success {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<div id="app" class="container">
<form>
<div v-for="item in filterOptions" :class="{ activeclass: isActive }">
<dl>
<dt>
<!--- click to show --->
<button v-on:click.prevent="toggle(item)">{{item.name}}</button>
</dt>
<!--- show this --->
<dd :id="item.name" v-if="item.name == selectedName" v-bind:class="{'success': (item.name == selectedName)}">
<button v-for="option in item.values" v-on:click="option.selected = !option.selected" type="button" class="btn btn-primary" :class="{'active' : option.selected}">
{{option.name}}
</button>
</dd>
</dl>
</div>
</form>
<div v-for="item in products">
<div>
<h5>
{{item.name}}
</h5>
<h6>{{item.region}}</h6>
<a>View</a>
</div>
</div>
</div>
</div>

Answer 2

Define activeitem in data and set this.activeitem = item.namein toggle method.
toggle: function (item) {
this.isActive = !this.isActive;
this.activeitem = item.name
}
in HTML add v-show="item.name == activeitem && isActive"
<dd v-show="item.name == activeitem && isActive" :id="item.name">
<button v-for="option in item.values" v-on:click="option.selected = !option.selected" type="button" class="btn btn-primary" :class="{'active' : option.selected}">
{{option.name}}
</button>
</dd>
var main = new Vue({
el: '#app',
data: {
activeitem:null,
products: [
{
name: "davy",
region: "Highland",
category: "Single Cask"
},
{
name: "bill",
region: "Islay",
category: "New releases"
},
{
name: "shena",
region: "Highland",
category: "Remarkable Regional Malt"
}
],
filterOptions: [
{
name: 'Region',
isActive: false,
values: [
{
name: 'Highland',
selected : false
},
{
name: 'Speyside',
selected : false
},
{
name: 'Islay',
selected : false
}
]
},
{
name: 'Price',
isActive: false,
values: [
{
name: '£1-50',
selected : false
},
{
name: '£51-100',
selected : false
},
]
},
{
name: 'Category',
isActive: false,
values: [
{
name: 'Single Cask',
selected : false
},
{
name: 'Remarkable Regional Malt',
selected : false
},
{
name: 'New releases',
selected : false
}
]
}
],
isHidden: true,
isActive: false
},
methods: {
toggle: function (item) {
this.isActive = !this.isActive;
this.activeitem = item.name
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="container">
<form>
<div v-for="item in filterOptions" :class="{ activeclass: isActive }">
<dl>
<dt>
<!--- click to show --->
<button #click="toggle(item)" #click.self.prevent>{{item.name}}</button>
</dt>
<!--- show this --->
<dd v-show="item.name == activeitem && isActive" :id="item.name">
<button v-for="option in item.values" v-on:click="option.selected = !option.selected" type="button" class="btn btn-primary" :class="{'active' : option.selected}">
{{option.name}}
</button>
</dd>
</dl>
</div>
</form>
<div v-for="item in products">
<div>
<h5>
{{item.name}}
</h5>
<h6>{{item.region}}</h6>
<a>View</a>
</div>
</div>
</div>