Nefcairon
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.
Trending in Questions
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
Hello!
Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app.
I creat...
New
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
So my question is quite simple and i have found no conclusive answer on forum, google or AI.
Should we use :erlang.float for Integer to ...
New
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
New
apply_graft/2 doesn’t rewrite an add_many sub-workflow’s deps on an add step. Grafted jobs cancel with “upstream job was deleted”
Version...
New
Other Trending Topics
I am happy to introduce the very α version of the new programming language compiled to BEAM.
Welcome Cure.
It has literally three kille...
New
Hobbes is a low-level distributed database for the Elixir programming language.
Hobbes provides a simple, safe, and scalable storage lay...
New
Hi there! We created Gust: A task orchestrator inspired by Airflow.
For those who have never heard about Aiflow, it’s a Python-based wor...
New
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve.
They are GUI (Emerge) and State management (S...
New
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #blog-post
- #ai
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming











Showing Posts 1 to 2- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
moogle19
You could define
countas apropand then implementupdate/2like this:Then you could initalize your counter like this:
Not sure if that is the correct way, but it worked for me, when I experimented with Surface.
Nefcairon
Yea, it works. Not declaring it as “data” but as “prop” did the trick. Thanks.