Vue class binding, better syntax?

Question

I have this component with some dynamic classes but it looks a little messy and I can't seem to figure out if there's a better way to write it. The class binding in vue kind of confuses me.

I'm using pug btw, but the focus should be on the :class anyway

section.section(:class="{'section--margin-top': cartStep === 1 && cart.length >= 3, 'section--full-screen section--centered' : cartStep !== 1 || cart.length < 3 }")

Should I be using a computed property? Or maybe the array syntax (which I can't quite wrap my head around)? Or...?

Thanks everyone for the help.

kalidou.diagne · Accepted Answer · 2018-02-15 13:19:12Z

1

Another solutions it's to create a computed property where you list your classes and the condition to activate it, if the condition you write for one determinate class it true vuejs add this class to your element:

computed: {
  myClassName() {
    'section--margin-top': this.cartStep === 1 && this.cart.length >= 3,
    'section--full-screen section--centered': this.cartStep !== 1 || this.cart.length < 3
  } 

}

then in your pug code:

section.section(:class="myClassName")

answered Feb 15, 2018 at 13:19

kalidou.diagne

4423 silver badges8 bronze badges

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

Comments

user320487 · Accepted Answer · 2018-02-15 10:12:21Z

1

I think a combination of computed properties and using template literal syntax would clean it up:

:class="`section--margin-top: ${marginTop}, section--full-screen section--centered: ${fullScreenCentered}`"

computed: {
    marginTop () {
        return this.cartStep === 1 && this.cart.length >= 3
    },
    fullScreenCentered () {
        return this.cartStep !== 1 || this.cart.length < 3
    }
}

I'm not familiar with pug so hope this translates properly.

answered Feb 15, 2018 at 10:12

user320487

1 Comment

Giacomo Over a year ago

Yes this would definitely work on pug and it is for sure a little cleaner. Thanks

mikeapr4 · Accepted Answer · 2018-07-20 18:41:56Z

0

So there are 4 approaches to consider:

Object Syntax - { 'a': true, 'b': false, 'c': true } => a c
Array Syntax - ['a', false ? 'b' : '', 'c'] => a c
Mixed Syntax - ['a', { 'b': false, 'c': true }] => a c
String Syntax - true ? 'a c' : 'b' => a c

And the last can work neatly here as the 2 conditions in the example are mutex:

:class="largeCart ? 'section--margin-top' : 'section--full-screen section--centered'"

With the following computed:

computed: {
    largeCart: (vm) => vm.cartStep === 1 && vm.cart.length >= 3,
}

Best pick a name that describes the scenario and not the resulting style.

answered Jul 20, 2018 at 18:41

mikeapr4

2,8581 gold badge18 silver badges24 bronze badges

Collectives™ on Stack Overflow

Vue class binding, better syntax?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related