Is x-bind:class not evaluated on pageload/render/init?

[iantbutler01]

So I have a button, that using my backend's templating engine, receives some data. In this case that is 'sharing_enabled' which is boolean.

<button x-bind:class="{'bg-indigo-600': on == true, 'bg-gray-200': on == false}" x-data="{ on: <%= @sharing_enabled %> }" @click="on = !on" phx-click="toggle-sharing" type="button" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="switch" aria-checked="false">

The issue is on page load if sharing_enabled == true my background is not indigo, and it only changes if I force a state change by clicking. From this I'm gathering that x-bind:class isn't evaluated on page load and only when an event fires.

First, is that true? Then if it is, what would be the best approach to triggering that class change on pageload/render/init? Other than using my backend's templating engine to handle that, largely because it will be ugly and tedious for every component I have that will receive dynamic starting state.

[SimoTod]

No, x-bind is evaluated at the beginning as well like all the other directives. Likely on is not the value you think it is.

[iantbutler01]

Thanks for the reply, no I'm certain on is true. Here's two images one confirming on is true and the other showing the toggle is gray and off. So something still isn't adding up.

[iantbutler01]

Okay I solved it and it wasn't an issue with Alpine but one of integrating with Phoenixe LiveView. A lot of the tutorials for PhoenixLiveView integration and AlpineJS show an outdated way of integration.

For anyone who lands on this later, as of today, from what I can gather, this dom section needs to be in your LiveSocket initialization or you have a lot of unexpected weirdness with Alpine.

let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken},
                                hooks: hooks,
                                dom: {
                                    onBeforeElUpdated(from, to){
                                        if(from._x_dataStack){ 
                                            window.Alpine.clone(from, to);
                                            Alpine.initTree(to);
                                        }
                                
                                    }
                                }
});