Genie Discord forum

Author AvatarDearRude
3/26/2023, 2:03:44 PM

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']" />

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

Author AvatarPere
3/28/2023, 2:24:13 PM

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!

Author AvatarDearRude
3/29/2023, 12:36:01 PM

I have something like this:

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

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

Author Avatarabhimanyuaryan
3/30/2023, 4:15:19 AM

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

Author AvatarDearRude
3/30/2023, 10:51:51 AM

I guess. I defined filter as such:

  @in filter::Dict{String,Any} = Dict()
Author AvatarPere
3/31/2023, 12:53:56 PM

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

@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

@page("/", "multiple_toggles.html")
<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']" />
Author AvatarPere
3/31/2023, 12:55:16 PM

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