Genie Discord forum

I have to set ~20 reactive variables, hope I could get some tips about how to set it in an easy way instead of manually?

the pure codes are:

function count(df, col)
  sum(df[!,col] .> 0)
end
@in item1 = 0
@in item2 = 0
...
@in item20 = 0
@in start

@onchange start begin
  df = CSV.read(...)
  item1 = count(df, "item1")
  item2 = count(df, "item2")
.....
end

for the html page,

<li v-bind:data = "item1">item1</li>
<li v-bind:data = "item2">item2</li>
...
<li v-bind:data = "item20">item20</li>

so is it any better way to finish it instead of code it one by one?

What I have try is below,

items = [ "item1","item2", ..., "item20"  ]
for i in items
  @eval( @in $(Symbol(i)) = 0  )
end
@onchange start begin
  df = CSV.read(...)
  for i in items
  i_sym = Symbol(i)
  @eval( $(i_sym) = count(df, i) ) 
end

and I have no idea that how to access the reactive variable from the html page, below does not work

<div v-for="choose,index in items">
  <li v-bind:data="items[index]"> {{choose}} </li>
</div>

Great thanks!

Although it is not recommended, using @evalis the way to go for dynamically adding variables. I do the same thing in the app gallery, although it's certainly given me many headaches

https://github.com/BuiltWithGenie/ComponentGallery/blob/aae0e09b3a1e69959ebbfa5c77d9d545b82d572e/app.jl#L21

Reactive variables are stored in a dict in GenieFramework.ReactiveTools.REACTIVE_STORAGE, and instantiated when a new user visits the app. You can check it to see if your vars are there.

Then, you can use the v-fordirective as you already are. Note that the code passed to it must be valid Javascript. In your case, if you just want to display the count you could do this

`

We have an example here, you can paste the Julia UI code in the REPL to get the HTML https://learn.genieframework.com/docs/examples/reactive-ui/loop-component-generation