Help With LiveView

Phoenix Forum Questions / Help
,
1

I’m writing my first LiveView App, I followed the Installation Guide and I defined the route in router.ex like this live "/thermo", ThermoLive then wrote my code like this:

defmodule ThermoWeb.ThermoLive do

  use Phoenix.LiveView
  alias ThermoWeb.ThermoView

  def mount(_params, _,socket) do
    {:ok, assign(socket, :temp, 32)}
  end

  def render(assigns) do
    ~L"""
    Current temperature: <%= @temp %>
    <button phx-click="set_temp">Set</button>
    """
  end

  def handle_event("set_temp", _,socket) do
    {:noreply, assign(socket, :temp, 24)}
  end
end

However, when I click on the button nothing happens? What did I do wrong?
Thanks in advance!

2

There’s nothing obvious wrong. I tried your code and it works. Can you make a minimum project that reproduces this issue?

1 Like
3

Can you check if you set your root layout? Then if you are using @inner_content in your root layout?

Live Layouts section of the docs has more details.

1 Like
4

As @sfusato has suggested. If you don’t see your assets being loaded (css, js) and your app header is missing, that means you haven’t set a live or root layout as the documentation suggests. You either have to create a live.html.leex and copy/paste the header from your app.html.eex + add flashes and content to your body as the example bellow.

lib/MyApp_web/templates/layout/live.html.leex

html
head 
csrf etc....
body..
<main role="main" class="container">
  <p class="alert alert-info" role="alert"><%= live_flash(@flash, :notice) %></p>
  <p class="alert alert-danger" role="alert"><%= live_flash(@flash, :error) %></p>
  <%= @inner_content %>
</main>

Then set the layout in your router call as (example)
live "/thermo", ThermoLive, layout: {MyApp.LayoutView, :live}

Or create root.html.eex to hold the header as it is shared between app and the live layout (can be found on the docs)

1 Like