van icon indicating copy to clipboard operation
van copied to clipboard

Array in a reactive state object does not seem to update via list?

Open KayOhtie opened this issue 11 months ago • 2 comments

I had a config object via vanX reactive where one of the values of a key was an array of strings. It seems I could read them just fine, but I couldn't write back to them in the same way.

So for instance:

const config = vanX.reactive({colors: ["#ffffff"]})
// ...
vanX.list(ul, config.colors, ({val: v}, deleter) => li(
    input({type: "color", value: v, oninput: e => v = e.target.value})
))

Does not seem to update the value of that index when changed, at all, though it reads perfectly fine from it -- tested via an add button adding a random color each press.

Changing this to be an array of objects solves the issue, but feels needlessly clunky for the usage. Is there something I'm missing? The documentation was not terribly clear on this so apologies if I misunderstood something.

KayOhtie avatar Feb 22 '25 01:02 KayOhtie

Try this:

const config = vanX.reactive({colors: ["#ffffff"]})
// ...
vanX.list(ul, config.colors, (v, deleter) => li(
    input({type: "color", value: v, oninput: e => v.val = e.target.value})
))

Tao-VanJS avatar Feb 22 '25 18:02 Tao-VanJS

You can get a better idea on how things work in this example.

I had to do some digging myself to get it to work properly. A quick rundown:

Have fun!

thednp avatar Feb 27 '25 17:02 thednp