I have list of posts
<div id="post_list" phx-update="prepend">
<%= for post <- @post_list do %>
-----
<% end %>
<% end %>
Each post is a live component with some alpine data
def render(assigns) do
~H"""
<div
id={"post_#{@content.id}"}
class="w-full flex mb-5"
phx-hook="PostHook"
x-data="{reactbutton: false, emoji: false}">
and the event that pushes the post
def handle_info({:post_created, post}, socket) do
socket =
socket
|> update(:post_list, fn post_list -> [post | post_list] |> Enum.reverse() end)
{:noreply, socket}
end
I am using temporary assigns on post_list.
If I use append, the post goes to the bottom of the list and everything works. If I use prepend the Alpine code never initializes, leaving the component in a broken state.
**
**
One thing I have noticed is that data-phx-components are out of order. I searched the community and docs for any clue on how to fix this and cannot find anything.