Vue.js: toggle class onclick

Question

I'm trying to set a class depending on if certain values are true.

My div:

<template>
<div class="navbar" v-bind:class=" {'test1': static, 'test2': isActive } ">
</template>

and in the script part of my component, I've written this:

<script>

export default {
  name: 'my-component',
  data: {
    static: true,
    isActive: true
  }
}

</script>

According to my understanding, this should show both the test1 class, and the test2 class. What am I misunderstanding -- shouldn't this be working? I want to toggle classes on click of a button, but I can't get this part working.

In a component, data needs to be a function.

Bert
– Bert

2017-09-18 19:26:32 +00:00
Commented Sep 18, 2017 at 19:26 — Bert
– Bert, Commented Sep 18, 2017 at 19:26

Bert · Accepted Answer · 2017-09-18 19:28:01Z

1

Data needs to be a function in a component.

export default {
  name: 'my-component',
  data(){
    return {
      static: true,
      isActive: true
    }
  }
}

answered Sep 18, 2017 at 19:28

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

1 Comment

user7699223 Over a year ago

Oh, thanks for the quick answer. This works well for my purposes -- thank you!

Collectives™ on Stack Overflow

Vue.js: toggle class onclick

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related