Array in a reactive state object does not seem to update via list?
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.
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})
))
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:
- Step 1 - define the reactive list
- Step 2 - update the reactive list
- Step 3 - render the reactive list
Have fun!