Repo not populating

Phoenix Forum Questions / Help
, , ,
1

I’m just building a basic todo app, and am unable to populate my list of todos. After defining a variable, which is initialized with my repo list, I’m inspecting the element. I’m able to see the empty list. I know the list exists, so I guess that’s step one.

Everytime I add an entry in my text field and click submit, the liveview reloads, but without populating the repo. What am I missing here?

@impl true

  def mount(_params, _session, socket) do

    socket = assign(socket, todo_list: Lists.list_lists())

    IO.inspect(socket)

    {:ok, socket}

  end

  @impl true

  def render(assigns) do

    ~H"""

    <form action="#" phx-submit="add">

      <%= text_input :todos, :title, placeholder: "Add a todo" %>

      <%= submit "Add", phx_disable_with: "Adding..." %>

    </form>

    <h1>Todos are here:</h1>

      <%= for list <- @todo_list do %>

      <p>list <%= list %></p>

    <% end %>

    """

  end

  @impl true

  def handle_event("add", %{"todo" => todo}, socket) do

    Lists.create_list(todo)

    {:ok, assign(socket, todos: Lists.list_lists())}

  end
2

You should checkout the output of Lists.create_list(todo) via IO.inspect and make sure that it is succeeding.

3

I’m able to see what I entered in the form, it’s under “value”. but my actual list is still left unpopulated.

Last message: %Phoenix.Socket.Message{event: "event", join_ref: "18", payload: %{"event" => "add", "type" => "form", "value" => "todos%5Btitle%5D=THIS+JUST+IN+FROM+THE+TEXT+INPUT+"}, ref: "22", topic: "lv:phx-FtHlmFadv4xowiPj"}
State: %{components: {%{}, %{}, 1}, join_ref: "18", serializer: Phoenix.Socket.V2.JSONSerializer, socket: #Phoenix.LiveView.Socket<assigns: %{__changed__: %{}, flash: %{}, list: nil, live_action: :index, page_title: "Listing Lists", todo_list: 
[]}, endpoint: TodoWeb.Endpoint, id: "phx-FtHlmFadv4xowiPj", parent_pid: nil, root_pid: #PID<0.3087.0>, router: TodoWeb.Router, transport_pid: #PID<0.3077.0>, view: TodoWeb.ListLive.Index, ...>, topic: "lv:phx-FtHlmFadv4xowiPj", upload_names: %{}, upload_pids: %{}}
[debug] QUERY OK source="lists" db=0.0ms idle=485.0ms
SELECT l0."id", l0."complete", l0."message", l0."inserted_at", l0."updated_at" FROM "lists" AS l0 []
#Phoenix.LiveView.Socket<
  assigns: %{
    __changed__: %{todo_list: true},
    flash: %{},
    live_action: :index,
    todo_list: []
4

I’m not talking about what you entered, I’m talking about the return value of the Lists.create_list(todo) function call.

5

Ok I’m guessing this has something to do with it. This means that the phx-submit=“add” isn’t matching any functions, correct?

** (FunctionClauseError) no function clause matching in TodoWeb.ListLive.Index.handle_event/3
    (todo 0.1.0) lib/todo_web/live/list_live/index.ex:14: TodoWeb.ListLive.Index.handle_event("add", %{"input_value" => %{"title" => "llllllllllllllllllll"}}, #Phoenix.LiveView.Socket<assigns: %{__changed__: %{}, flash: %{}, list: nil, live_action: :index, page_title: "Listing Lists", todo_list: []}, endpoint: TodoWeb.Endpoint, id: "phx-FtHrV1N2rIxjNktB", parent_pid: nil, root_pid: #PID<0.4480.0>, router: TodoWeb.Router, transport_pid: #PID<0.4477.0>, view: TodoWeb.ListLive.Index, ...>)

my render is a heex file. I had thought initially that I was mixing up heex and leex?


<form phx-submit="add">

  <%= text_input :input_value, :title, placeholder: "Add a todo" %>

  <%= submit "Add", phx_disable_with: "Adding..." %>

</form>

<h1>Todos are here:</h1>

  <%= for list <- @todo_list do %>

  <p>list <%= list %></p>

<% end %>
6

Right, as the error message says, it’s trying to give you the arg %{"input_value" => %{"title" => }} but your def handle_event expects the pattern %{"todo" => todo}. This causes an error.

1 Like