Vue.js bind to a class according to a condition

Question

With this div declaration:

<div v-bind:class="[currentPage === 'help' ? highlight : '']">

that I build accordingly to: https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax

But the binding isn't working (the class 'highlight' never applied regardless of the currentPage value).

I have this model where there is the currentPage variable keeping track of the active page:

    var vueApp = new Vue({
        el: '#vueApp',
        data: {
            currentPage: 'help',

How can I activate the binding of a class on an element, based on the string value of a vue property?

acdcjunior · Accepted Answer · 2018-03-25 23:11:21Z

4

In the template:

<div v-bind:class="[currentPage === 'help' ? highlight : '']">

highlight is an identifier.

Thus, such expression expects that highlight is property of the Vue instance/component. It is being evaluated, but since it probably is empty (undefined) you get nothing.

Since you want the string, do:

<div v-bind:class="[currentPage === 'help' ? 'highlight' : '']">

Demo:

new Vue({
  el: '#vueApp',
  data: {
    currentPage: 'help',
  }
})

.highlight { background-color: yellow }

<script src="https://unpkg.com/vue"></script>

<div id="vueApp">
  <div v-bind:class="[currentPage === 'help' ? 'highlight' : '']">Hello</div>
</div>

edited Mar 25, 2018 at 23:11

answered Mar 25, 2018 at 23:09

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

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

2 Comments

Bruno Over a year ago

Thanks! I tried changing it (adding quotes) but it still doesn't seem to be working...

acdcjunior Over a year ago

It must be something else. Check the updated answer, I have added a demo.

Collectives™ on Stack Overflow

Vue.js bind to a class according to a condition

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related