[Vuejs]-Update parent class in Vue.js

by

0👍

✅

This answer Vue bind click that adds active class (and removes from the last one) helped me figure it out.

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

Here is the updated code that works properly.

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

Leave a comment