Can I pass a computed property and an object inside a v-bind:class in Vuejs?-CodePudding

I want to understand if I can do something like this, because I am trying but only getting erros... Forgive my bad english.

HTML file would be something like

<p : > My text </p>

and the component file would have something like

export default {
  data () {
    return {
      isActive: true
    }
  },
  computed: {
    myComputedProperty () {
      // do something
    }
  }
}

CodePudding user response：

class value is an expression. If it doesn't make sense in raw JavaScript, it doesn't make sense there. Here comma operator is used, so the expression evaluates to myComputedProperty, and {mycss: isActive} part is discarded.

The format for combined class value is documented:

Since computed values are involved, defining the whole class object as a computed will result in cleaner template code.

CodePudding user response：

I think the error is in your HTML - the comma is probably the cause. There are lots of ways to format strings, but this is one option:

<p : > My text </p>