Vuejs v-bind class not applying the classes dynamically

Question

<button @click="startEffect"> Start Effect</button>
<br/>
<div id="effect" class="highlight" :class="{highlight: enableHighlight}"></div>

I just need the highlight class to be applied based on the data property enableHighlight but for some reason It doesn't apply the class when the startEffect function is called.

<script>
    export default {
        data() {
            return {
                enableHighlight: false
            }
        },
        methods: {
            startEffect: function () {
                this.enableHighlight = !this.enableHighlight;
            }
        }
    }
</script>

I have debugged and confirmed that value of enableHighlight is switched when clicking the button and that the CSS classes are present. However upon clicking the button the class is not applied to the div.

@JamesCoyle I tried removing that it doesn't make a difference — Rennnn
– Rennnn, Commented Apr 8, 2019 at 10:56

sandrooco · Accepted Answer · 2019-04-08 11:32:52Z

2

You really mess with Vue when having a "normal" class attribute and one dynamic. Remove the normal one. <div id="effect" :class="{highlight: enableHighlight}"></div>

To make it work, you need to remove the function in startEffect's definition:

startEffect() {
    this.enableHighlight = !this.enableHighlight;
}

Why? because this isn't the same in the different ways to define the function. Learn more about this here.

answered Apr 8, 2019 at 11:32

sandrooco

8,88611 gold badges56 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs v-bind class not applying the classes dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related