Additional Bindings
There are additional bindings outside of the four main bindings for User Events that you will find extremely useful and that you will use often.
Value Bindings
When you need to send along additional data with an event binding you can use a "value binding" which looks something
like phx-value-[NAME]
where [NAME]
is replaced by the key of the value you want to pass. This binding can be used in
conjunction with other click, key, and focus bindings.
Value Binding Example
For example let's say you want to send the mark_complete
event to the server along with and id
value
(e.g., {id: "myId"}
) when the user clicks on the "Complete" button. To do this you do the following:
<button phx-click="mark_complete" phx-value-id="myId">Complete</button>
Note the [NAME]
part of phx-value-[NAME]
is id
used as the object key while the attribute value (i.e., "myId"
) is
used as the object value.
This example would send the following event to the server:
{
type: "mark_complete",
id: "myId"
}