Javascript 更新Vue.js中的父类

我是一个Vue.js noob，正在尝试找出如何在for循环中为所单击链接的父级切换类

我想单击“高级”链接，然后为

部分

和

切换一类覆盖。高级字段

元素仅在该部分。我知道我可以将onOff数据属性添加到每个部分，但我正在保存到数据库中，不想添加不必要的数据字段

谁能给我指一下正确的方向吗。谢谢

这是我的代码的简化版本

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

身份证件
等级
新Vue({
el:“应用程序”，
数据：{
“章节”：[
{
“id”：“第1节”，
“css_类”：”
},
{
“id”：“第2节”，
“css_类”：”
}
],
“onOff”：false
},
方法：{
showAdvanced:功能（部分）{
this.onOff=！this.onOff；
}
}
});

这个答案帮助我找到了答案

下面是正常工作的更新代码

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

身份证件
等级
{{$data}}
新Vue({
el:“应用程序”，
数据：{
“章节”：[
{
“id”：“第1节”，
“css_类”：”
},
{
“id”：“第2节”，
“css_类”：”
}
],
“isActive”：空
},
方法：{
showAdvanced:功能（索引）{
this.isActive=this.isActive==index？null:index
}
}
});

这个答案帮助我找到了答案

下面是正常工作的更新代码

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

身份证件
等级
{{$data}}
新Vue({
el:“应用程序”，
数据：{
“章节”：[
{
“id”：“第1节”，
“css_类”：”
},
{
“id”：“第2节”，
“css_类”：”
}
],
“isActive”：空
},
方法：{
showAdvanced:功能（索引）{
this.isActive=this.isActive==index？null:index
}
}
});

几乎完全相同的问题和答案：感谢@wostex帮助我解决了这个问题，如果其他人遇到这个问题，我会在下面发布我的更新代码。几乎完全相同的问题和答案：感谢@wostex帮助我解决了这个问题，如果其他人遇到这个问题，我会在下面发布我的更新代码。