Hello,
I try to learn Surface. So I came across the Counter example (from here: Surface) :
defmodule Counter do
use Surface.LiveComponent
data count, :integer, default: 0
def render(assigns) do
~F"""
<div>
<h1 class="title">
{@count}
</h1>
<div>
<button class="button is-info" :on-click="dec">
-
</button>
<button class="button is-info" :on-click="inc">
+
</button>
</div>
</div>
"""
end
def handle_event("inc", _value, socket) do
{:noreply, update(socket, :count, &(&1 + 1))}
end
def handle_event("dec", _value, socket) do
{:noreply, update(socket, :count, &(&1 - 1))}
end
end
In the example the count is set to 0 by default.
Let’s assume I want to use the counter on different locations:
<Counter id="C1" />
<Counter id="C2" />
<Counter id="C3" />
In C1 it should start at 0, in C2 at 4 and in C3 at 300.
So how can I let the component start with different values?
What I tried so far:
I can set “prop” to a value in the component “call”, but not “data assigns”.
I then tried to set a prop and then copy the value during mount
to the data assign. That didn’t work.