Alpine .js Can't x-bind styles inline

Just wanted to check I am not missing something here. In Vue JS, it is possible to data bind styles inline


<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Data block:

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Alpine JS doesn't seem to support this. The x-bind works for class binding, but as soon as I try it to do a style inline in blows up!

Back to Vue JS for me I guess.

upnorthal

5 years ago

Level 13

Managed to get it working like this

    <div x-data="{ bcolor: 'red', tcolor: 'white' }">

        <div
            :style="`background-color: ${bcolor}; color: ${tcolor}`  "
        >
        Test
        </div>

    </div>

7 likes

johncarter

5 years ago

Level 3

Really useful! Thanks.

leonnicklas

4 years ago

Level 1

@upnorthal Yep, needed exactly this right now... Thx!

Please or to participate in this conversation.