Modify AlpineJs X-Data from Elixir Phoenix Liveview's JS Library

Question

In an elixir phoenix liveview, I have a modal that is opened like so:

<button
@click={"open_modal_#{@element.id} = !open_modal_#{@element.id}}"}></button>

and then

<div x-show={"open_modal_#{@element.id}"} x-cloak>

What I would want to do is to, after submitting a form on the modal, close the modal by negating

{"open_modal_#{@element.id}"}

to keep the x-data coherent. I would like to use Phoenix.LiveView.JS for this, but I don't know if this is possible. Is there a way to do this ? Otherwise, is there any other possibility to change x-data from .ex files?

score 0 · Answer 1 · answered Mar 14 '23 at 13:30

With AlpineJs you need to be aware that Alpine will loose track of the elements its attached to every time LiveView updates the DOM. You can fix that by modifying liveSocket initialisation code:

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

Exactly the same problem you are mentioning here is solved on this blog post: https://fullstackphoenix.com/tutorials/combine-phoenix-liveview-with-alpine-js

Modify AlpineJs X-Data from Elixir Phoenix Liveview's JS Library

1 Answers1