card disappears when pressing on the "x-mark" icon

Phoenix Forum Questions / Help
, , , , , , , ,
1

Hi All,
Please I need help as I’m very new to phoenix framework and elixir…
I’ve implemented a card and i want when a user clicks on the “x-mark” icon the card exits.
This is my code
Mount Function:

@impl true
def mount(params, _session, socket) do
user_id = socket.assigns.current_user.id
{
:ok,
socket
|> assign( :setup_card, true)
}
end

Handle function:

def handle_event(“hide_card”, _ , socket) do
{:noreply, assign(socket, :setup_card, false)}
end

Update funtion:

@impl true
def update(assigns, socket) do
IO.inspect(assigns)
{:ok,
socket
|> assign(assigns)}
end

HTML code icon:

<.icon name="hero-x-mark" class="w-5 h-5" />

Live_component of the whole card:

<.home_setup_account current_user={@current_user} setup_card={@setup_card} :if={@setup_card} />

2 
<div phx-click="hide-card" class="cursor-pointer">
 <.icon name="hero-x-mark" class="w-5 h-5" />
</div>
3

Thank you very much for your help, however, I’ve added this line and still it won’t working any other ideas?

4

Thank you

5

When you tried this phx-click attribute, did you see anything in your logs when you clicked it?

I am talking about the “logs” that appear in your shell/terminal when you run mix phx.server.

Maybe there is some log about the "hide-card" event?

Last question: are you using a LiveComponent (Phoenix.LiveComponent — Phoenix LiveView v0.20.14) or is it just a normal LiveView? If you are using a live component then you need to also use the target attribute, like this:

<div phx-click="hide-card" target={@myself} class="cursor-pointer">