Vue.js: Computed value for class

Question

In my view I have the following conditional class:

<td class="text-center" v-bind:class="{ positivity }"></td>

and in my component I have the following:

positivity: function() {
    var type = typeof this.transaction.weeks != "undefined"
    var positive = 'green-bold'

    if ( type ) {
      positive = 'red-bold'
    }

    return positive
}

...but then my computed class shows as:

<td class="text-center positivity"></td>

regardless of the result of positivity(). What am I doing wrong?

Happyriri · Accepted Answer · 2017-04-03 14:30:24Z

1

You can do :

v-bind:class="positivity"

or :

v-bind:class="{ 'green-bold': !positivity, 'red-bold': positivity }"

and

positivity: function() {
    return typeof this.transaction.weeks != "undefined";
}

answered Apr 3, 2017 at 14:30

Happyriri

4,4532 gold badges20 silver badges30 bronze badges

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

1 Comment

Jeremy Thomas Over a year ago

Thank you! Not sure why I included the curly braces

Collectives™ on Stack Overflow

Vue.js: Computed value for class

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