Question

我是一个Vue.js菜鸟，试图弄清楚如何在一个for循环中为所点击的链接的父级切换一个类。

我想点击＆＃34;高级＆＃34;链接，然后仅在该部分中为section和.advanced-fields元素切换一类叠加层。我知道我可以将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>

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>

在Vue.js中更新父类

1 个答案: