Object-based class / style binding doesn't seem to work with scope-based x-bind.

[bennadel]

I'm not sure if I'm just doing something wrong here. But, I can use object-based class and style attributes when the object is defined inline:

<div x-data :class="{ foo: true }" :style="{ color: 'red' }"> ... </div>

This applies foo to the class attribute and color: red to the style attribute.

However, if I try to move the class and style definitions to the data scope:

<div x-data="app" x-bind="theme"> ... </div>

<script>
	function app() {
		return {
			theme: {
				class: {
					foo: true
				},
				style: {
					color: "red"
				}
			}
		};
	}
</script>

... then I get class="[object object]" style="[object object]" in the rendered HTML. I feel like I must be doing something wrong with my syntax, but I can't seem to figure it out. Or, maybe this is a bug?

[bennadel]

Oh, going over the documentation again, I see this note about the x-bind for directives:

The object values are either plain strings, or in the case of dynamic Alpine directives, callbacks to be evaluated by Alpine.

So, it looks like the behavior is "as designed". I'll close-out the bug discussion.

[ekwoka]

For anyone that sees this, the correct syntax for using binding objects is either

{
	theme: {
		class() {
			return {
				foo: true
			}
		},
		style(){
			return {
				color: "red"
			}
		}
	}
}

or

{
	theme: {
		class: `{
			foo: true
		}`,
		style: `{
			color: "red"
		}`
	}
}

[bennadel]

Interesting. I ended up just putting a styles property in the scope and using that:

<div :style="styles">

... and then:

function app() {
	return {
		styles: {
			color: "red"
		}
	};
}

Thanks for the tip!

[ekwoka]

that too :)