Vue bind multiple class with conditional

Question

I have the following div in my component:

<div :class="sidebarOpen ? 'translate-x-0 ease-out transition-medium' : '-translate-x-full ease-in transition-medium'" class="sidebar fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 border-r overflow-auto lg:static lg:inset-auto lg:translate-x-0">

I want to add another class to this, which is a computed property:

computed: {
    borderColor() {
        return {
            "bg-white": this.$apollo.loading,
            [colorBorder[this.board?.color]]: true
        }
    },
}

Can anyone advise how I can do this please?

Boussadjra Brahim · Accepted Answer · 2022-03-18 19:03:49Z

1

Try to use the array syntax :

<div :class="[sidebarOpen ?'...':'...',borderColor]"

answered Mar 18, 2022 at 19:03

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

Vue bind multiple class with conditional

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related