0

I was giving a try to Phoenix Live View building a basic chat when I found a strange behaviour. Probably due to my lack of knowledge about Phoenix templates...

When trying to assign dynamically a CSS class to a component, making use of <%= if _, do: _, else: _ =>:

<div class=<%= if msg.user == @user, do: "msg local-user", else: "msg other-user" %>>

The problem is that this is rendered to <div class"msg" local-user""> instead of <div class="msg local-user">

glennsl
  • 28,186
  • 12
  • 57
  • 75
jkmrto
  • 104
  • 1
  • 6

1 Answers1

1

You need to have double-quotes in the HTML (i.e. outside of the EEx syntax), like this:

<div class="<%= if msg.user == @user, do: "msg local-user", else: "msg other-user" %>">
Everett
  • 8,746
  • 5
  • 35
  • 49