How to bind class with dynamic class name?

Wappler General Need Help
1

Hi,

Suppose I have the following code:

<span class="flag-icon flag-icon-us"></span>

That should give a US flag icon. But, I want to dynamically compute the class name, like so:

<span class="flag-icon flag-icon-{{data.country}}"></span>

Is this possible with Wappler’s framework?

2

Speaking off the top of my head. Not without a custom extension.

The dynamic class is an html attribute that takes a static argument as the class name and a truthy expression as value so there is no way to pass a binding as a class name.

3

Yikes!

Well, I’ve attempted to mix Alpine.js, but it didn’t play too well:

The problem is, after DMX’s variable update, Alpine doesn’t really know the variable has changed. If I go on inspector tools and manually edit the HTML (e.g.: add a blank space) Alpine then renders stuff correctly:

<span class="flag-icon" x-bind:class="'flag-icon-' + dmx.parse('country.value').toLowerCase()"></span>

Edit: country is set as a DMX global variable

4

Let me grab a coffee and I will have a deeper look.

Your issue and setting conditionally multiple classes at once are both shortcomings of the conditional class attribute. The latter has a workaround but I believe yours hasn’t.

5

What if you try:

dmx-bind:class="'static-part' + dynamic
-part"
1 Like
6

LOL. Or that.

I was on to something when I knew I needed some coffee.

Sorry @Apple I gave for granted that you needed this only if certain condition was true.

7

Spot on! Thanks Teodor and JonL

P.S.: I think UI is missing for this option

1 Like
8

Having it in the UI could cause confusion. Say you had a column with class col and then applied the dmx-bind:class with a text colour, you would add the colour but overwrite the column thus losing the layout.

1 Like