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 
    } 
}