As you’ve discovered, you can only pass fairly basic data structures in as values. You have a couple of options:
- Generate a lookup server-side (e.g. a map) which links a simple key you can pass to
phx-target...
and use that in the event-handler to lookup the actual data item. The advantage of this is it minimises encoding/decoding, plus the size of the payload going back and forth to the browser. - Or, encode your struct into a form that can be handled, e.g. JSON/XML/other, then decode it when it gets passed back to the event handler. An example of this is here: Want to pass data using phx-value, getting Error of protocol Phoenix.HTML.Safe not implemented for %{.....} - #10 by fazibear
I’d probably opt for 1 if your client doesn’t need to know anything about the data (i.e. you’re not envisaging writing any javascript hooks to decode the value).