Conditionally showing "delete" link in index live views

lcabrini

I have a schema with a status field, that can be :draft, :published, etc. In the index live view, I only want the delete link to be available for items that have not been published, that is they are :draft.

I thought this should be extremely simple:

<%= if article.status == :draft do %>
  <:action :let={{id, article}}>
    <.link
      phx-click={JS.push("delete", value: %{id: article.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      Delete
    </.link>
  </:action>
<% end %>

However, this tells me:

== Compilation error in file lib/foobar_web/live/article_live/index.ex ==
** (Phoenix.LiveView.Tokenizer.ParseError) lib/foobar_web/article_live/index.ex:37:11: invalid slot entry <:action>. A slot entry must be a direct child of a component
   |
34 |               Delete
35 |             </.link>
36 |           </:action>
37 |         <% end %>
   |           ^

I don’t really get it. As far as I understand, it IS a direct child of a component, all that exists above it is a logic statement, a “preprocessor statement”, which should have been evaluated in an initial pass, or?

In any case, I accept that for some reason this doesn’t work.. But then, how would I achieve what I’m trying to do? It seems common enough that I imagine this should be easy to do. I can’t seem to find the right keywords to search on.

If I re-arrange it a bit so that the <% if … %> is embedded inside the <:action …>, then it does work. Is that the best way to do it?

21 comments

/phoenix #liveview-heex

0 611 21

2026-01-09 20:14:19 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

matt-savvy

What happens if you do it like this:?

<:action :if={condition}>
    ...
</:action>

Post #1

FlyingNoodle

The error message tells you the issue:

you need to put your conditional inside the slot.

Post #2

LostKobrakai

or better on the slot using :if as suggested by @matt-savvy. that way the slot is not passed with empty content to the component.

Post #3

garrison

Tbh this is what convinced me that named slots are not a very good API. They’re a cool idea but they don’t hold up because they don’t compose properly. The introduction of :if and :for is, IMO, an ugly bandaid. Components are a more versatile primitive.

But yeah, as mentioned above, you have to use :if (or potentially :for) if you want to elide the slot itself from the output.

Alternatively you could ditch slots and use a component like <.article_action /> and then your intuitive solution would actually work.

Post #4

lcabrini

This does look like the proper way to solve it.

Post #5

lcabrini

Of course there was going to be a simple and logical solution. And of course my mind was not going to figure it out. Thanks.

Post #6

lcabrini

Maybe I wrote a bit too soon.

<:action :let={{id, article}} :if={article.status == :draft}>

Gives me: undefined variable “article”. Which one get evaluated first, the :let or the :if? Or more to the point, how to I use article in the conditional?

Post #7

garrison

In the OP you are using an article from the outer scope and then rebinding the variable inside the :let. Where did the outer article go?

This is kinda just proving my point, though. I have absolutely no idea how precedence is handled between :let and :if because it’s not real code, it’s a made up template language. So now we’re both confused.

(Just gonna casually tag @bartblast (hi) because this is a pretty clear real-world example of why I am anti-template, which he may appreciate.)

Post #8

lcabrini

Since this is just an experimental project where I’m trying different things out, I was going to try both solutions. I wanted to start with the one @matt-savvy proposed and then yours. Apart from the :if clause I added, this is standard index view that phx.gen.live would create. I’m guessing that the outer article “variable” is created by <.table>.

The only way I can understand why the variable is not available to the :if would be that it creates new scope that knows nothing about article. If that is the case, then I don’t understand what the use of the conditional clause would be.

Post #9