Phoenix Component click event vs Live Component click event | Elixir Language | Page 1

steel pine Mar 8, 2023, 11:05 PM

#

With a Live Component (https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html), the phx-click events it triggers a handle_event so you can easily elixir functions elsewhere, but when looking at the Phoenix Component (https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html), I am a little confused about what phx-click event does/how to use it.

I can see in the core_components.ex it's used to run some JavaScript - but was wondering if that was all?

For example if I wanted to navigate from a phoenix component to a liveview component, is that something I could do with phx-click? Or would it be wrong to use a phx-click for navigation and I should use <.link navigate={...} /> instead?

Essentially I'm looking for a way to do the below but with a function component on a div

  def handle_event("view_server", params, socket) do
    {:noreply, push_redirect(socket, to: "/server/#{params["id"]}")}
  end

steel pine Mar 9, 2023, 6:45 PM

#

Sat on it for a bit and used my brain for a hot second, have progressed to this where the phx-click calls a function - but this only runs the function when the page is loaded and not on click.

Anyone have any ideas why it could be doing this?

defmodule ExampleWeb.ServerComponent do
  use Phoenix.Component

  def view_server(id) do # this gets called on page load, does nothing on click
    IO.inspect("Clicked")
  end

  def component(assigns) do
    ~H"""
      <div phx-click={view_server(@server.id)}>Server</div>
    """
  end
end