Event of child LiveView gets sent to parent

Viewed 364

Im rendering a nested (child) LiveView inside my main LiveView. Events inside the child LiveView gets sent to the parent instead of the child.

How do i achieve that the child LiveView receives the event and not the parent?

I am using phoenix_live_view 0.17.5.

Here is my setup:

The render inside my main LiveView:

def render(assigns) do
    ~H"""
      <%= live_render(@socket, MyProjectsWeb.HomeLive.CreateProjectForm, id: "create-project-form-liveview") %>
    """
  end

The render inside my child LiveView:

def render(assigns) do
    ~H"""
      <.form let={f} for={@changeset} phx-submit="create">
            <.field_label bind={f} for={:name} value={"Name"}/>
            <.text_field bind={f} name={:name} />
            <.primary_button type="submit">
              Create
            </.primary_button>
      </.form>
    """
  end

When i submit the Form in my child LiveView i get a error saying that the handle Event function in my parent LiveView is undefined.

I tried to add phx-target="create-project-form-liveview" to my form but when i do that the submit button doesnt do anything anymore and the Browser console says "nothing found matching the phx-target selector "create-project-form-liveview" undefined.

When i add phx-target="#create-project-form-liveview" to my form instead the event fires but still gets received by my main (parent) LiveView.

0 Answers
Related