更新父類中Vue.js

Question

我是Vue.js小白，並試圖找出如何切換一個類中的for循環點擊該鏈接的父。

我想單擊「高級」鏈接，然後僅在該部分中爲section和.advanced-fields元素切換一類疊加層。我知道我可以在開關機的數據屬性添加到每個部分，但我保存到數據庫，並不願意在不必要的數據字段添加。

任何人都可以指向正確的方向。謝謝。

這裏是我的代碼的簡化版本。

<div id="app"> 
    <section v-bind:class="{ overlay: onOff }" v-for="section in sections"> 
     <a href="#0" @click.prevent="showAdvanced(section)">Advanced</a> 

     <div class="advanced-fields" v-bind:class="{ overlay: onOff }" v-show="onOff"> 
      <fieldset> 
       <label> 
        ID 
        <input type="text" name="section[id]"> 
       </label> 
      </fieldset> 
      <fieldset> 
       <label> 
        Class 
        <input type="text" name="section[css_class]"> 
       </label> 
      </fieldset> 
     </div> 
    </section> 
</div> 

<script> 
new Vue({ 
    el: "#app", 
    data:{ 
     "sections": [ 
      { 
       "id": "section-1", 
       "css_class": "" 
      }, 
      { 
       "id": "section-2", 
       "css_class": '' 
      } 
     ], 
     "onOff": false 
    }, 
    methods: { 
     showAdvanced: function(section) { 
      this.onOff = !this.onOff; 
     } 
    } 
}); 
</script> 

Answer 1

這個答案Vue bind click that adds active class (and removes from the last one)幫我弄明白了。

https://jsfiddle.net/ferne97/n1hfde94/

這裏是更新的代碼可以正常工作。

<div id="app"> 
    <section v-bind:class="{ overlay: index == isActive }" v-for="(section, index) in sections"> 
     <a href="#0" @click.prevent="showAdvanced(index)">Advanced</a> 

     <div class="advanced-fields" v-bind:class="{ overlay: index == isActive }" v-show="index == isActive"> 
      <fieldset> 
       <label> 
        ID 
        <input type="text" name="section[id]" v-model="section.id"> 
       </label> 
      </fieldset> 
      <fieldset> 
       <label> 
        Class 
        <input type="text" name="section[css_class]" v-model="section.css_class"> 
       </label> 
      </fieldset> 
     </div> 
    </section> 

    <pre>{{ $data }}</pre> 
</div> 

<script> 
new Vue({ 
    el: "#app", 
    data:{ 
     "sections": [ 
      { 
       "id": "section-1", 
       "css_class": "" 
      }, 
      { 
       "id": "section-2", 
       "css_class": '' 
      } 
     ], 
     "isActive": null 
    }, 
    methods: { 
     showAdvanced: function(index) { 
      this.isActive = this.isActive === index ? null : index 
     } 
    } 
}); 
</script>