我有一个v-for循环,它为页面添加了一段div。在页面加载时,应该选择第一个,然后当您单击另一个时,它应该将活动类添加到单击的div并从最后一个div中删除活动类。
我尝试了以下无法解决的问题。有什么建议吗?
<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>
答案 0 :(得分:2)
我建议如下:
如果一次只需要一个active
个部分,请创建数据属性isActive
并在其中存储当前活动索引。如果再次单击活动部分(在第二次单击时切换类),也会将当前index
传递给changeActive
方法并存储索引或清除它:
new Vue({
el: '#app',
data: {
areaSections: [...],
isActive: null
},
methods: {
changeActive(index) {
this.isActive = this.isActive === index ? null : index
}
}
})
然后,在您的模板中,确保将index
传递给点击监听器:
<section class="monitoring-areas section" v-on:click="changeActive(index)">
最后,使用新数据prop来绑定active
类:
v-bind:class="{ active: index == isActive }"
可在此处找到完整示例:https://jsfiddle.net/wostex/63t082p2/73/
答案 1 :(得分:0)
如果您需要在每个区域中使用$rg = $conect->prepare("INSERT INTO account (login, Passwd, Email, Nick, Gamepoint)VALUES (?,?, ?, ?, ?);");
属性,那么我可以通过将该区域发送到该函数来明确它:
isActive
在方法中:
<section class="monitoring-areas section" v-on:click="changeActive(area)">