When are VueJs methods binded?

[BartButenaers]

Hi folks,
Would like to support Joe a bit solving one of the 300+ dashboard issues, but lacking some VueJs knowledge unfortunately:

I have added some methods to the ui-template node, and want to use those in the created() hook:

methods: {
    setupHead() {
      ...
    },
    parseHeadElements() {
       ...
   }
},
created() {
    this.$dataTracker(this.id);
    this.parseHeadElements()
    this.updateTemplate()
}

But that fails because the methods seem to have not been binded yet to this:

TypeError: this.parseHeadElements is not a function
    at Proxy.created (index-BRXhQldV.js:246:5488)
    at callWithErrorHandling (index-BRXhQldV.js:17:2136)
    at callWithAsyncErrorHandling (index-BRXhQldV.js:17:2244)
    at callWithAsyncErrorHandling (index-BRXhQldV.js:17:2400)
    at callHook$1 (index-BRXhQldV.js:17:24414)
    at applyOptions (index-BRXhQldV.js:17:23477)
    at finishComponentSetup (index-BRXhQldV.js:17:74881)
    at setupStatefulComponent (index-BRXhQldV.js:17:74013)
    at setupComponent (index-BRXhQldV.js:17:73411)
    at q (index-BRXhQldV.js:17:46071)

However Joe's dashboard methods seem to have been binded already to the proxy object:

From e.g. this StackOverflow discussion I assume that method binding happens in the lifecycle before the created hook has been called?

Hopefully anybody can see what I am doing wrong, because I have no clue at all.

Thanks!!
Bart

[hotNipi]

For me the dev tools says

[TotallyInformation]

That makes sense since the Vue app will likely have run through its created and mounted phases long before the template reaches it.

[BartButenaers]

Ah yes confusing indeed. Will need to explain it in more detail.

I have added my code snippet above to the core ui-template node code (at this location), not inside the ui-template config screen like the users do. Because I am trying to fix a reported issue in the ui-template node core code. I am not trying to add that code snippet inside the editor of the ui-template node config screen.

So my created() hook (in the core ui-template node code) is being called, and inside this hook I want to build the DOM subtree (as specified by the user in the config screen).

So the created() hook of the ui-template core code is called in my debugger, but the this does not contain the functions which I had added to the methods section. Hopefully that describes my problem a bit better.

[TotallyInformation]

Sorry, beyond my knowledge level of Vue.

[Steve-Mcl]

@BartButenaers

So the created() hook of the ui-template core code is called in my debugger, but the this does not contain the functions which I had added to the methods section

They should be: vue docs

How did you determine they were "not there" Bart?

try console logging them e.g:

created() {
    this.$dataTracker(this.id);
    console.log("this", this)
    console.log("this.parseHeadElements", this?.parseHeadElements)
    console.log("this.updateTemplate", this?.updateTemplate)
}

Also, did you rebuild after modifying? I often have issues with source maps (yuk). Try modifying the vite.config.js to provide non minified, full source.

    build: {
        // Generate a source map in dev mode
        // sourcemap: process.env.NODE_ENV === 'development',
        minify: process.env.NODE_ENV === 'development' ? false : undefined,
        outDir: '../dist',
        emptyOutDir: true
    },

and of course, run npm run build:dev or npm run dev for hot reload

[BartButenaers]

@Steve-Mcl,
Thanks for your assitance (and time)!

• I determined the functions where not there because (see my original post above) calling them in the created() hook results in a nasty stack trace.

• Yes done a couple of rebuilds, refreshed my browser, ...

• Here you can see the same result with your not-minified code and console statements:

  

[BartButenaers]

@Steve-Mcl
Think I found it
Have not tested it yet, but I think that will be the root cause.
I have two times methods: defined in my vue file: one time for the existing methods and one time for my new methods. Don't think that Vue will like that...
Sorry for the noise!!!

[Steve-Mcl]

@BartButenaers

I have two times methods: defined in my vue file:

Doh! That'll do it,

[BartButenaers]

@Steve-Mcl

Try modifying the vite.config.js to provide non minified, full source.

@Steve-Mcl,
Is there a particular reason why your build config is not in the standard vite.config.js file? Because together with that npm run build:dev command that seems to be working very nice. Such commands would be a welcome addition to the dashboard contribution docs, for people like me (who don't work with Vue in their daily jobs). Thanks for sharing your tips!!! Very useful...

[Steve-Mcl]

Only because I am in the middle of the wysiwyg stuff and I am not in a simple position to switch branch and propose it. You hit lucky (timing wise) as I only just yesterday got sick of source maps being out of step and looked for alternative (which is what i proposed to you).

If your env is in a better state than mine, feel free to propose a change.

EDIT: done - Improve DX - dont minify dev build by Steve-Mcl · Pull Request #1471 · FlowFuse/node-red-dashboard · GitHub

[BartButenaers]

Thanks Steve!!