Hi folks, I installed phoenix "~> 1.7.0-rc.0"
and Elixir 1.14.2
and my LiveView version is 0.18.3
; after that I test the modal of core_components
like this:
<.modal id="delete_confirm" show={true}>
Are you sure you?
<:confirm>OK</:confirm>
<:cancel>Cancel</:cancel>
</.modal>
it works, and I can see the modal as well as possible, but when I replaced the Boolean value with a state like this:
def mount(_params, _, socket) do
new_socket = assign(socket, modal_status: false, section_id: nil)
{:ok, new_socket}
end
def render(assigns) do
~H"""
<.modal id="delete_confirm" show={@modal_status}>
Are you sure you?
<:confirm>OK</:confirm>
<:cancel>Cancel</:cancel>
</.modal>
<p phx-click="delete_access" phx-value-id="11" phx-value-type="section-drag">open modal</p>
"""
end
def handle_event("delete_access", %{"id" => id, "type" => "section-drag"}, socket) do
IO.inspect(id)
new_socket = assign(socket, modal_status: true, section_id: id)
# Show modal and get access from user
{:noreply, new_socket}
end
Unfortunately, my modal does not work and nothing happened
Is there any problem in my code?
Thank you
Update
I think it is because this phx-mounted
, it does not let me use initial page render, am I right?
<div id={@id} phx-mounted={@show && show_modal(@id)} class="relative z-50 hidden">
I can use it like this:
def render(assigns) do
~H"""
<%= if @modal_status do %>
<.modal id="delete_confirm" show={true}>
Are you sure you?
<:confirm>OK</:confirm>
<:cancel>Cancel</:cancel>
</.modal>
<% end %>
<p phx-click="delete_access" phx-value-id="11" phx-value-type="section-drag">open modal</p>
"""
end
But why LiveView Core_components
uses mounted
here?