I have a loop that dynamically adds div sections to the page. I want the first one to be selected on page load, and then when another one is clicked, it should become active while the previous one loses its active status.
I attempted the code below but it is not working as expected. Any ideas for improvement?
<div class="col-sm-6" v-for="(area, index) in areaSections">
<section class="monitoring-areas section" v-on:click="changeActive()">
<h3>
Area {{index + 1}}: {{area.title}}
<span class="section-image hidden-xs hidden-sm">
<i class="icon icon-zoom"></i>
<router-link to="/edit-monitoring-area">
<i class="icon icon-pen"></i>
</router-link>
</span>
</h3>
<div class="section-content" v-bind:class="{ active: area.isActive }">
<div class="row">
<div class="col-xs-5">
<div v-html="area.img"></div>
</div>
</div>
<div class="row hidden-lg visible-sm visible-xs visible-md">
<div class="col-lg-7 col-sm-8 col-xs-7 mb">
<p class="fw700"><span class="green">Email Alerts:</span> Monthly</p>
</div>
</div>
</div>
</section>
</div>
<script>
export default {
name: 'monitoringAreas',
data: function() {
return {
areaSections: [
{
title: 'Home',
address: {
street: '1517 Castillo St',
city: 'Santa Barbara',
state: 'CA',
postalCode: '93117'
},
img: '<img src="static/img/map-small-2.jpg" alt="map">',
alerts: 'Monthly',
isActive: true
},
{
title: "John's neighborhood",
address: {
street: '3142 West 4th St',
city: 'Santa Barbara',
state: 'CA',
postalCode: '93117'
},
img: '<img src="static/img/map-small-2.jpg" alt="map">',
alerts: 'Monthly',
isActive: false
},
{
title: "Near Work",
address: {
street: '174 Collegio Rd',
city: 'Santa Barbara',
state: 'CA',
postalCode: '93117'
},
img: '<img src="static/img/map-small-2.jpg" alt="map">',
alerts: 'Monthly',
isActive: false
},
]
}
},
methods: {
isActive() {
return this.isActive;
},
changeActive() {
this.isActive = !this.isActive;
}
}
}
</script>