Vue绑定点击，添加活动类（并从最后一个删除）

Question

我有一个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> 

Answer 1

我建议如下：

，如果你只需要一个部分是active的时间，创建一个数据属性isActive和存储当前活动指标出现。如果你再次点击活动部分亦通电流index到changeActive方法和存储索引或清除它（可开启第二次点击类）：

new Vue({ 
    el: '#app', 
    data: { 
    areaSections: [...], 
    isActive: null 
    }, 
    methods: { 
    changeActive(index) { 
     this.isActive = this.isActive === index ? null : index 
    } 
    } 
}) 

然后，在你的模板时，请通过index到点击监听器：

v-bind:class="{ active: index == isActive }" 

全为例：

<section class="monitoring-areas section" v-on:click="changeActive(index)"> 

最后，利用新数据丙结合active类E能在这里找到：https://jsfiddle.net/wostex/63t082p2/73/

Answer 2

如果需要其他的东西每一个领域isActive财产，那么我会让它明确通过发送区域的功能：

<section class="monitoring-areas section" v-on:click="changeActive(area)"> 

而且在方法：

methods: { 
    changeActive(area) { 
    const old = this.areaSections.find(section => section.isActive) 
    old.isActive = false 
    area.isActive = true 
    } 
}