Genie Discord forum

5-length nested vector make textfield doesn't work, but 4-length do well?

10/22/2023, 7:57:18 AM

It's very confusing to me... see codes follow:

using GenieFramework

@genietools

ar = [Any[1, 1, 1] for i in 1:5]

@app begin
    @in ar
end

function pp()
    [
        textfield("test", Symbol("ar[4][1]"))
    ]
end;

@page("/", pp)
up()

This one actually run well, but once I change the index of ar from 4 to 5, Whole genie page doesn't worked.

function pp()
    [
        textfield("test", Symbol("ar[5][1]"))
        #Here's the only changement, from 4 to 5.
    ]
end;

At my browser's dev-mode, it give me some Vue error like:

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '1')"
(found in <Root>)
......

vue.js:1906 TypeError: Cannot read properties of undefined (reading '1')
    at Proxy.eval (eval at createFunction (vue.js:11698), <anonymous>:3:155)
    at Vue._render (vue.js:3572)
    at Vue.updateComponent (vue.js:4082)
    at Watcher.get (vue.js:4494)
    at Watcher.run (vue.js:4569)
    at flushSchedulerQueue (vue.js:4327)
    at Array.<anonymous> (vue.js:1998)
    at flushCallbacks (vue.js:1924)
......

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '1')"
(found in <Root>)
......

vue.js:1906 TypeError: Cannot read properties of undefined (reading '1')
    at Proxy.eval (eval at createFunction (vue.js:11698), <anonymous>:3:155)
    at Vue._render (vue.js:3572)
    at Vue.updateComponent (vue.js:4082)
    at Watcher.get (vue.js:4494)
    at Watcher.run (vue.js:4569)
    at flushSchedulerQueue (vue.js:4327)
    at Array.<anonymous> (vue.js:1998)
    at flushCallbacks (vue.js:1924)
......

Sadly I'm definitely not a web engineering, I got no idea with Vue.js at all.

XLin0mu

10/22/2023, 8:29:04 AM

WTF? I tried to use Symbol("ar[0]") and it works?? A Julia project, Which using 0-based index method? Is there really some tips that I didn't seen or just nothing mentioned?

Pere

10/23/2023, 11:53:44 AM

If you print the generated UI, you'll see this:

julia> print(textfield("test", Symbol("ar[4][1]")))
<q-input label="test" v-model="ar[4][1]"></q-input>

Note that the Symbol is inserted into the generated HTML as a Javascript expression. This is normally not an issue since we insert entire variables with :varname. The variable in the julia backend is serialized and sent to the browser as a Javascript variable.

In your case, you're accessing a position in an array. Since Javascript uses 0-indexed arrays, anything you set as a reactive variable (the v-model parameter) need to follow this convention.