Genie Discord forum

I want to have a dynamic number of q-toggles in my view file. So I implemented something like:

<div v-for="fil in filters">
  <q-toggle v-model="fil['active']" :label="fil['name']" />
</div>

It works fine. However, I want my dynamic list to get updated whenever filters changes.

can you share a minimal example with the Julia code as well so that I can try it and figure out how to help? thanks!

I have something like this:

@onchange command begin
    if command == "add plot"
      push!(filters, filter)
    end

I expect my toggles list to get updated each time I push an item to filters. Am I missing something?

is filter type reactive? In your @app/model?

I guess. I defined filter as such:

  @in filter::Dict{String,Any} = Dict()

The issue you're having is that push! does not trigger an update on the front end. To update the array of filters,you have to redefine it. Here's a MWE

module App
using GenieFramework
@genietools

@app begin
    @out toggle_list = []
    @in toggle_name = "toggle"
    @in process = false
    @onchange process begin
        println("Filter added")
        toggle_list = vcat(toggle_list, Dict("name" => toggle_name, "active" => false))
        @show toggle_list
    end
end


@page("/", "multiple_toggles.html")
Server.up()
end

<q-input v-model="toggle_name"> </q-input>
<q-btn v-on:click="process = !process">Add toggle </q-btn>
<div v-for="toggle in toggle_list">
  <q-toggle v-model="toggle['active']" :label="toggle['name']" />
</div>

Now, what I don't know is whether storing each toggle's active state in an array of dicts will work...